媒体查询在移动设备上不起作用
[英]Media query does not work on mobile devices
问题描述
I am using Chrome and Window Resizer by ionut botizan v 1.9.1.2 
我正在使用ionut botizan v 1.9.1.2的Chrome和Window Resizer
I am using atom open source editor, although I initially created the page in phpstorm 尽管我最初是在phpstorm中创建页面的，但我使用的是原子开源编辑器
My problem 我的问题
I am able to click the window resize button and the page will resize upto ipad, when I try to resize mobile versions, high end windows phone, iphone and low end windows phone the browser window remains the size of the ipad coefficents 1024 x 768 and only some page elements will allow me to adjust its width, I can change other properties, ie color,background etc. however the width of header, banner and left_right_content,wont budge, adjust in size this also cause the effect of being able to scroll to the right 我可以单击窗口调整大小按钮，然后页面将调整为ipad，当我尝试调整移动版本，高端Windows Phone，iphone和低端Windows Phone的大小时，浏览器窗口的大小仍为ipad系数1024 x 768和只有一些页面元素将允许我调整其宽度，我可以更改其他属性，例如颜色，背景等。但是页眉，横幅和left_right_content的宽度，不会让步，调整大小也会导致能够滚动的效果在右边
I have tried other sites i have made and the plugin works fine, and I have also tested a live website, and that seems to work, theres is something in this code stopping resizing, maybe some one will notice where something I missed, any help welcome 我试过我制作的其他网站，插件工作正常，并且我也测试了一个在线网站，这似乎行得通，此代码中有些内容停止调整大小，也许有人会注意到我错过了什么，任何帮助欢迎
<head>
<meta charset= "utf-8">
<meta name="descripton" content="kids at play"/>
<meta name= "keywords" content="kids, club, play, learn"/>
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<base href="http://localhost/Kids Club/Kids_Club.html"/>
<link rel="stylesheet" href="Kids_Club.css" type="text/css"/>
<title>html_5</title>
</head>
<body>
<div id="wrapper">
<div id="header"><img id ="img_header" src="jpg/kids_club_header.jpg" alt="kids club"/>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Playgroups</a>
<ul>
<li><a href="#">Under Fives</a></li>
<li><a href="#">Under Tens</a></li>
<li><a href="#">The Teens</a>
</ul>
</li>
<li><a href="#">Play & Learn</a>
<ul>
<li><a href="#">Field Trips</a></li>
<li><a href="#">Tutor Groups</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div id="banner"><img id ="img_banner" src="jpg/kids.jpg" alt="kids"/>
</div>
<div id="left_col_content">
<h2 class="top_title">Bring out the tiger in you</h2>
<h3 class="top_title">Activities for the Under Fives and Tens</h3>
<p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun,
laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day</p>
<img id ="left_column_img" src="jpg/tieger.jpg" alt="kids club"/>
<a href="" title="click me">more info</a>
</div>
<div id="right_col_content">
<h2 class="top_title">Play and Learn</h2>
<h3 class="top_title" >Activities for all</h3>
<p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make
time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow.
</p>
<img id ="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn"/>
<a href="" title="click me">more info</a>
</div>
<div id="newsflash">
<h2>Latest news</h2>
<p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p>
</div>
<div id="left_right_content"><h2 id="activity">What's On Today</h2>
<img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah"/>
<img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft"/>
</div>
<div id="footer"></div>
</div>
</body>
</html>
body{ background-color: #024378; } #wrapper{ min-width:960px; width: 75%; margin-left: auto; margin-right: auto; background-color: #e3f1f2; } #header,#img_header{ min-width: 960px; width:100%; min-height:100px; height:12.5%; } .top_title{ color: #009fc0; } nav{ min-width:640px; width: 70%; margin-left:auto; margin-right:auto; } nav ul li:hover > ul { display: block; } nav ul { background: #009fc0; padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #ffffff; } nav ul li:hover a { color: #96a4a5; } nav ul li a { display: block; padding: 25px 40px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; } nav ul ul li a:hover { background: #ffffff; } nav ul ul ul { position: absolute; left: 100%; top:0; } nav ul ul { background: #ffffff; border-radius: 0; padding: 0; position: absolute; top: 100%;display:none; } /*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form columns within the page use set margins, i.e10px*/ #img_banner { min-width:940px; width: 100%; height: 240px; margin-left: auto; margin-right: auto; } #banner{ min-width: 940px; width: 73.4375%; height: 240px; margin-left: auto; margin-right: auto; } #left_col_content{ float:left; min-width: 420px; width:32.8125%; margin: 1%; background-color: #ffffff; color: #06acef; text-indent:10px; padding: 2%; } #right_col_content{ float:left; min-width: 420px; width:32.8125%; margin: 1%; background-color: #ffffff; color: #06acef; text-indent:10px; padding: 2%; } #left_column_img, #right_column_img{ min-width: 200px; width:15.625%; min-height: 100px; height:12.5%; margin-left: auto; margin-right: auto; } #newsflash{ clear:both; min-width: 920px; width:71.875%; min-height:50px; height:6.25%; background-color: #009fc0; margin-left: auto; margin-right: auto; color:#fff; text-indent:10px; padding: 1%; } #left_right_content{ min-width: 890px; width: 69.53%; margin: 10px auto; height:300px; background-color: #ffffff; color: #06acef; border: dashed #009fc0; padding: 2%; } #activity { border-bottom: dotted 3px #06acef; } #jumeirah{ clear: both; float: left; min-width:80px; width: 47%; padding: 10px; } #artandcraft{ clear: none; float: right; min-width:80px; width: 47%; padding: 10px; } #footer{ clear:both; min-width: 940px; width:73.4375%; min-height:50px; height:6.25%; background-color: #009fc0; margin:auto; color:#fff; text-indent:10px; } @media only screen and (min-width:0px) and (max-width:480px) { /*low end windows phone*/ } @media only screen and (min-width:481px) and (max-width:640px){ /*iphone*/ #header,#img_header{ width: 50%; } #left_col_content { width: 58%; } #right_col_content{ clear: both; width: 58%; } #newsflash{ width: 56%; } #left_right_content{ width: 58%; } } @media only screen and (min-width:641px) and (max-width:768px) { /*high windows phone*/ } @media only screen and (min-width:769px) and (max-width:1024px) { /*ipad*/ #left_col_content { width: 94%; } #right_col_content{ width: 94%; } }
2 个解决方案
解决方案1
1 已采纳 2015-12-12 12:01:27
It's always helpful to place your code on http://jsfiddle.net to help us visualise. 将您的代码放在http://jsfiddle.net上总是有帮助的，以帮助我们可视化。
I've copied your code to https://jsfiddle.net/uhds3eac/ 我已将您的代码复制到https://jsfiddle.net/uhds3eac/
The many min-width properties you're using should be wrapped in a media-query for only larger screen sizes : 您正在使用的许多min-width属性应仅在较大的屏幕尺寸中包装在媒体查询中：
@media screen and (min-width:920px){
#newsflash {
min-width: 920px;
}
}
It's often a good idea to start with mobile, then accomodate for larger screens with @media rules. 从移动设备开始，然后通过@media规则适应较大的屏幕通常是个好主意。
Note: This isn't the issue but you're missing a starting <html> tag 注意：这不是问题，但您缺少起始的<html>标记
解决方案2
0 2015-12-12 11:56:16
Your min-width statements look like the culprits, try removing them. 您的min-width语句看起来像元凶，请尝试将其删除。
You'll still need to tinker with the width of some parts to make it look good, but as a rule try to only use percentage values, not px . 您仍然需要调整某些部分的width以使其看起来不错，但通常请尝试仅使用百分比值，而不要使用px 。
body { background-color: #024378; } #wrapper { width: 75%; margin-left: auto; margin-right: auto; background-color: #e3f1f2; } #header, #img_header { width: 100%; min-height: 100px; height: 12.5%; } .top_title { color: #009fc0; } nav { width: 70%; margin-left: auto; margin-right: auto; } nav ul li:hover > ul { display: block; } nav ul { background: #009fc0; padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #ffffff; } nav ul li:hover a { color: #96a4a5; } nav ul li a { display: block; padding: 25px 40px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; } nav ul ul li a:hover { background: #ffffff; } nav ul ul ul { position: absolute; left: 100%; top: 0; } nav ul ul { background: #ffffff; border-radius: 0; padding: 0; position: absolute; top: 100%; display: none; } /*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form columns within the page use set margins, i.e10px*/ #img_banner { width: 100%; height: 240px; margin-left: auto; margin-right: auto; } #banner { width: 73.4375%; height: 240px; margin-left: auto; margin-right: auto; } #left_col_content { float: left; width: 32.8125%; margin: 1%; background-color: #ffffff; color: #06acef; text-indent: 10px; padding: 2%; } #right_col_content { float: left; width: 32.8125%; margin: 1%; background-color: #ffffff; color: #06acef; text-indent: 10px; padding: 2%; } #left_column_img, #right_column_img { width: 15.625%; min-height: 100px; height: 12.5%; margin-left: auto; margin-right: auto; } #newsflash { clear: both; width: 71.875%; min-height: 50px; height: 6.25%; background-color: #009fc0; margin-left: auto; margin-right: auto; color: #fff; text-indent: 10px; padding: 1%; } #left_right_content { width: 69.53%; margin: 10px auto; height: 300px; background-color: #ffffff; color: #06acef; border: dashed #009fc0; padding: 2%; } #activity { border-bottom: dotted 3px #06acef; } #jumeirah { clear: both; float: left; width: 47%; padding: 10px; } #artandcraft { clear: none; float: right; width: 47%; padding: 10px; } #footer { clear: both; width: 73.4375%; min-height: 50px; height: 6.25%; background-color: #009fc0; margin: auto; color: #fff; text-indent: 10px; } @media only screen and (min-width: 0px) and (max-width: 480px) { /*low end windows phone*/ } @media only screen and (min-width: 481px) and (max-width: 640px) { /*iphone*/ #header, #img_header { width: 50%; } #left_col_content { width: 58%; } #right_col_content { clear: both; width: 58%; } #newsflash { width: 56%; } #left_right_content { width: 58%; } } @media only screen and (min-width: 641px) and (max-width: 768px) { /*high windows phone*/ } @media only screen and (min-width: 769px) and (max-width: 1024px) { /*ipad*/ #left_col_content { width: 94%; } #right_col_content { width: 94%; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="descripton" content="kids at play" /> <meta name="keywords" content="kids, club, play, learn" /> <meta name="robots" content=index,follow/> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1.0"> <base href="http://localhost/Kids Club/Kids_Club.html" /> <link rel="stylesheet" href="Kids_Club.css" type="text/css" /> <title>html_5</title> </head> <body> <div id="wrapper"> <div id="header"> <img id="img_header" src="jpg/kids_club_header.jpg" alt="kids club" /> </div> <nav> <ul> <li><a href="#">Home</a> </li> <li> <a href="#">Playgroups</a> <ul> <li><a href="#">Under Fives</a> </li> <li><a href="#">Under Tens</a> </li> <li><a href="#">The Teens</a> </ul> </li> <li> <a href="#">Play & Learn</a> <ul> <li><a href="#">Field Trips</a> </li> <li><a href="#">Tutor Groups</a> </li> </ul> </li> <li><a href="#">Contact Us</a> </li> </ul> </nav> <div id="banner"> <img id="img_banner" src="jpg/kids.jpg" alt="kids" /> </div> <div id="left_col_content"> <h2 class="top_title">Bring out the tiger in you</h2> <h3 class="top_title">Activities for the Under Fives and Tens</h3> <p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun, laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day </p> <img id="left_column_img" src="jpg/tieger.jpg" alt="kids club" /> <a href="" title="click me">more info</a> </div> <div id="right_col_content"> <h2 class="top_title">Play and Learn</h2> <h3 class="top_title">Activities for all</h3> <p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow. </p> <img id="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn" /> <a href="" title="click me">more info</a> </div> <div id="newsflash"> <h2>Latest news</h2> <p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p> </div> <div id="left_right_content"> <h2 id="activity">What's On Today</h2> <img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah" /> <img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft" /> </div> <div id="footer"></div> </div> </body> </html>
Try researching Mobile First Design to learn more. 尝试研究Mobile First Design，以了解更多信息。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
parseFloat 不适用于移动设备 - parseFloat does not work on mobile devices
媒体查询在 chrome 和 Firefox 桌面上工作，但在移动设备上不工作 - Media query working in chrome and Firefox desktop but not in mobile devices
HTML的“onclick”是否适用于移动设备？ - Does HTML's 'onclick' work on mobile devices?
Google Maps项目在移动设备上不起作用 - Google maps project does not work on mobile devices
js onkeyup 在移动设备上不起作用 - js onkeyup does not work on mobile devices
Javascript onclick在移动设备上不起作用 - Javascript onclick does not work on mobile devices
function scrollPage() 在移动设备上不起作用 - function scrollPage() does not work on mobile devices
我想让我的页面响应移动，但似乎媒体查询不起作用，为什么？ - I am tring to make my page mobile responsive but it seems like media query does not work, why?
Jquery 媒体查询 2 个设备 - Jquery media query for 2 devices
为什么我的媒体查询不起作用？ - Why does my media query not work?
相关标签