移动设备宽度不缩小

【问题标题】：Mobile device does not shrink in width移动设备宽度不缩小
【发布时间】：2014-11-02 05:28:54
【问题描述】：

我正在尝试制作一个响应式网站。基本上，当您调整浏览器大小时，事情会发生变化等等。现在我的那部分工作正常。

当我在手机上加载页面时，问题出现了，无论如何手机似乎都加载了 1024 像素宽度。现在我强制我的内容为 450 像素宽，但这也没有奏效。这与我使用最大宽度的事实有关吗？ max-width 可以告诉手机以 1024 像素加载它吗？如果是这样，我该如何解决这个问题，我如何告诉移动设备以预期的大小加载网站？

此时我没有使用任何媒体查询，因为我还没有到达我需要它们的部分，但我也想知道这是否也是问题所在？我是否绝对必须进行媒体查询，如果它是 720 像素，我必须强制每个对象的最大宽度为 720 像素，否则它将不起作用？

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

您好像错过了viewport <meta> tag：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

【讨论】：

我已经添加了那个元标记，但是这使得页面不仅缩小，而且缩小到超出页面的设置宽度 450 像素，我如何使页面成为设置的宽度？
我猜这就是媒体查询发挥作用的地方，我将网站的其余部分调整为这些大小？
@Bagzli 一个非常典型的策略是媒体查询，当页面宽度低于450 或默认情况下，将内容宽度设置为100%。
不要使用 'maximum-scale=1' 除非你有真正的理由这样做。这将阻止用户使用双指缩放进行放大。阅读：blog.javierusobiaga.com/…
@tomasz86 假设您的网站布局正确（字体大小合适，图像被放大以适应屏幕），我认为无法放大和缩小会改善体验。跨度>