网页宽度与屏幕宽度不匹配[关闭]答案

【问题标题】：Width of webpage doesn't match screen width [closed]网页宽度与屏幕宽度不匹配[关闭]
【发布时间】：2014-12-17 06:56:47
【问题描述】：

所以我的网页appr.co/work/work.html 无法在移动设备上正确显示。发生的情况是最小宽度似乎是 960 像素，在我测试它的 iPhone 5 上，屏幕宽度是 568 像素，最终缩小以使页面适合，但结果一切看起来都太小了，导航栏不会恢复到其移动外观。我试过了

$("*").css({"min-width": "568px"});

作为测试它是否会正确显示，但它仍然是 960 像素，但现在右侧的空白区域变薄了。请帮忙！

【问题讨论】：

欢迎！不幸的是，您的“问题”不包括任何实际问题。那么我们应该帮助你什么呢？如果您在此处发布所需的最少 HTML 和 CSS，也会有所帮助。

标签： javascript html css mobile web

【解决方案1】：

您不需要任何 JS 来使您的网页在移动设备中正确呈现。只需为此使用@media。查找此信息以获取 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 。

所以对于 568px 你可以写

@media only screen and (max-width:568px){ .class{property:value;} }.

另外不要忘记包含meta 标签以在真实设备上获取有效的媒体查询（只需在head 标签中包含<meta name="viewport" content="width=device-width">）。更多信息在这里http://css-tricks.com/snippets/html/responsive-meta-tag/。

【讨论】：