CSS 媒体查询不适用于移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11660149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media queries not working on mobile
提问by JVG
Similar questions have been asked here before, but after reading through them I've not yet found an answer that works with my site.
以前也有人在这里问过类似的问题，但在阅读它们之后，我还没有找到适用于我的网站的答案。
I've built the site around Bootstrap but added some of my own media queries. Live test site is at: http://agoodman.com.au
我已经围绕 Bootstrap 构建了该站点，但添加了一些我自己的媒体查询。现场测试站点位于：http: //agoodman.com.au
The sections being changed by the media queries are "our fees" and the "map" overlay. If you're on a laptop, resizing the browser makes these sections display as blocks.
媒体查询更改的部分是“我们的费用”和“地图”叠加层。如果您使用的是笔记本电脑，调整浏览器的大小会使这些部分显示为块。
My stylesheet links:
我的样式表链接：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/user.css" rel="stylesheet">
"User.css" is just a separate file because I wanted to be able to keep and update bootstrap's main framework as necessary. User.css overrides the styles in bootstrap. My media queries in user.css are as follows:
“User.css”只是一个单独的文件，因为我希望能够根据需要保留和更新引导程序的主要框架。User.css 覆盖引导程序中的样式。我在 user.css 中的媒体查询如下：
@media screen or handheld(max-width: 979px) {
.fee-buttons {
height: auto;
font-weight: 600;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.fee-buttons .transformation {
width: 100% !important;
height: 300px;
position: relative;
z-index: 10;
left:0;
}
.fee-buttons .hourly, .fee-buttons .membership {
float: none;
width: 100% !important;
}
li.button{
overflow:visible;
}
}
@media screen or handheld(max-width: 995px) {
#overlay {
position: relative;
display: block;
width: auto;
right: 0;
padding:1em;
}
}
As I said, on desktop browsers this works fine, but on mobile browsers it's not working at all. I've tested both on an iPhone 4 (using safari) and on an HTC Desire (using the stock android browser) and both display the same way - ignoring the media query and just displaying the full website with lots of really squished and unflattering content.
正如我所说，在桌面浏览器上这工作正常，但在移动浏览器上它根本不起作用。我已经在 iPhone 4（使用 safari）和 HTC Desire（使用安卓浏览器）上进行了测试，并且都以相同的方式显示 - 忽略媒体查询，只显示完整的网站，其中包含许多非常压抑和不讨人喜欢的内容.
Any ideas on what I'm doing wrong here?
关于我在这里做错了什么的任何想法？
EDIT:
编辑：
Here are screenshots of what it's SHOULDlook like at a small screen width: 
以下是在小屏幕宽度下它应该是什么样子的屏幕截图：
And what it currently looks like on Android and iPhone, where the device is ignoring my media queries:
以及它目前在 Android 和 iPhone 上的样子，其中设备忽略了我的媒体查询：
回答by JVG
Sorry to answer my own question, but I found something that worked.
很抱歉回答我自己的问题，但我发现了一些有效的方法。
There was an error with the way I set up the media query. Instead of
我设置媒体查询的方式有误。代替
@media screen or handheld(max-width: 995px)
@media screen or handheld(max-width: 995px)
I changed the query to
我将查询更改为
@media handheld, screen and (max-width: 995px)
@media handheld, screen and (max-width: 995px)
as suggested by this guy: https://stackoverflow.com/a/996820/556006
正如这个人所建议的：https: //stackoverflow.com/a/996820/556006
and it worked perfectly across all devices. Thanks to those who offered suggestions, upvotes to all of you.
它在所有设备上都能完美运行。感谢提供建议的人，为大家点赞。
回答by Torsten Walter
displaying the full website with lots of really squished and unflattering content.
显示完整的网站，其中包含许多非常压抑和不讨人喜欢的内容。
This might be due to the fact that your media queries target large screens with a width of 979 and 995 pixels. Mobile screens are much smaller.
这可能是因为您的媒体查询针对的是宽度为 979 和 995 像素的大屏幕。手机屏幕要小得多。
To target something like an iPhone 4 you need a max-widthof 960px(that's why bootstraps default is at 960) for landscape and 480pxfor portrait.
要定位类似的iPhone 4，你需要max-width的960px（这就是为什么白手起家缺省值是960），用于景观和480px肖像。
Since you can't target all possible screen sizes bootstrap offers a sensible list of default widths which you should stick to too.
由于您无法针对所有可能的屏幕尺寸，bootstrap 提供了一个合理的默认宽度列表，您也应该坚持使用。
