CSS 响应式设计 - Media Query 不适用于 iPhone？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13002731/
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
Responsive design - Media Query not working on iPhone?
提问by Gearu
I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
我正在尝试为我的网站创建一个适合移动设备的版本，以使我的网站能够响应较小的屏幕尺寸并相应地进行缩放。
I've created some media queries, that behave correctly in a browser when resizing on a desktop.
我创建了一些媒体查询，在桌面上调整大小时，它们在浏览器中的行为正确。
On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?
在我的 iPhone 上，safari 只是缩小了整个网站，但仍保持整个网站的纵横比。如何让媒体查询被观察？我错过了什么吗？
Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:
这是我正在尝试正常工作的沙箱的链接 - 感谢任何帮助或建议：
回答by coopersita
Do you have the meta for view port in your html?
你的 html 中有视图端口的元数据吗？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
更多信息：http: //webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
回答by Must Impress
I think you'll find a warning in Chrome with ; instead of , This should work just fine:
我想你会在 Chrome 中找到一个警告；而不是，这应该可以正常工作：
<meta name="viewport" content="width=device-width, initial-scale=1">
回答by Filemangler
I just experienced the most bizarre thing after troubleshooting this same problem for a day. Something to try if all else fails...
在对同一问题进行了一天的故障排除后，我刚刚经历了最奇怪的事情。如果所有其他方法都失败了，可以尝试一些东西......
My pages were perfectly responsive on my laptop during development but not on my iPhone, iPad or Samsung. I finally discovered I had to put a comment line after the DOCTYPE statement and before the html lang statement, like this:
在开发过程中，我的页面在我的笔记本电脑上完全响应，但在我的 iPhone、iPad 或三星上却没有。我终于发现我必须在 DOCTYPE 语句之后和 html lang 语句之前放置一个注释行，如下所示：
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
Finally, my pages were responsive on the mobile devices. Weird!
最后，我的页面可以在移动设备上响应。奇怪的！
