固定移动设备的网页宽度

【问题标题】：Fixed web page width for mobile devices固定移动设备的网页宽度
【发布时间】：2014-01-29 03:36:39
【问题描述】：

我一直致力于响应式设计。为了阻止内容跨越边界，我使用了宽度为 480 的 viewpoint 元标记。问题是我希望我的 网站以至少 480px 加载，无论如何。如果屏幕宽度小于 480 像素，我希望它通过“缩小”适合屏幕宽度。

我使用了以下视点元标记：

<meta name="viewport" content="width=480px, initial-scale=1, maximum-scale=1" />

我还使用了 min-width css 标签来指定最小宽度。

<body style="min-width: 480px; width:100%; margin:auto;">

因此，当我尝试在 DevTools Emulator (Google Chrome) 中加载网站时，它显示了一个水平滚动条。对如何做有任何想法。

【问题讨论】：

【解决方案1】：

你试过width=device-width吗？

我认为在元数据中强制使用 480px 不会做你想做的事情（不跨越媒体查询类型边界）。

【讨论】：

感谢您的回复。我尝试使用 whdth=device-width。但问题是它设置宽度等于设备宽度。如果网站移动视图的宽度小于 480 像素，则页面内容会变得混乱。所以我希望它重新划分最小宽度为 480px
您可以使用媒体查询来定位宽度 article on media queries
此外，在不确切知道您正在开发的移动应用程序或设备类型的情况下，请考虑让您的代码要求设备完全匹配某个宽度通常是不好的主意。原因是大量设备无法达到精确的测量值。通常最好使用设备尺寸范围来挑选设计。
如果您可以为我的答案投票，或者如果它有效，请接受正确的答案，那会很酷。