如何确保移动布局不会太宽和放大？答案

【问题标题】：How to ensure mobile layout isn't too wide and zooms in?如何确保移动布局不会太宽和放大？
【发布时间】：2013-08-02 16:15:19
【问题描述】：

我有一个布局：

我面临的问题是它太宽了。我需要它的最大宽度为 640 像素。

我知道如何设置定义最大宽度的 CSS，但随后发生的情况是布局的上限为 640 像素，并且不是 SCALED。所以我只剩下空白了。

截图是高分辨率的 Nexus 7。我想将我的布局设置为最大 640 像素，并将其放大到屏幕尺寸。

我试过了：

<meta name="viewport" content="width=640, maximum-scale=2, minimum-scale=1">

而且效果很好，我看到一个 640 像素宽的布局缩放到屏幕上。但是，它在 iPhone 5 等较小分辨率的设备上看起来很糟糕，因为它强制 iPhone 具有 640 像素宽的视口。

有没有办法根据手机屏幕分辨率设置最小 320 - 最大 640 像素宽的布局，然后将其缩放到屏幕而不是留下空白空间？

这是一个例子：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=200">
<style>
body {
background: green;
width: 200px;
}
</style>
</head>
<body>
<div style="background:red; width: 200px; height: 200px;">
</div>
</body>
</html>

看起来像这样：http://d.pr/i/LOZ7

如何让红色填满屏幕？如何使它按比例放大以使其水平填充？

【问题讨论】：

标签： html css mobile

【解决方案1】：

您可以使用viewport 到`device-width'，即：

 <meta name="viewport" content="width=device-width">

另外还包括一个最小宽度。然后使用媒体查询来调整显示在宽度大于640px 的设备上的工作方式。

此外，请务必以百分比指定内容元素的宽度。这样，内容将由浏览器缩放以填充可用空间。

【讨论】：

我尝试device-width 使用 CSS 使布局为 640px 宽以适应更大的屏幕。结果是我看到 640px 宽的布局，周围有空白区域。我希望浏览器将 640px 缩放到可用的 1920px 屏幕。
我建议将正文 CSS 更改为 body { background: green; width: 100%; } 并将 div 定义更改为 <div style="background:red; width: 100%; height: 200px;">。这样无论浏览器宽度如何，内容都会调整。
恐怕你还没有达到我的目标 :) 我知道我可以让 CSS 100% 流畅，就像上面的截图一样。它是 100% 宽度填充所有空间。我不想要那个。我希望它是一个精确的大小（在本例中为 640 像素），并且我希望它放大，以便剩余空间充满我的 640 像素内容。如果我在示例 sn-p 中为 body 和 div 设置 100%，它不会放大，而是布局会变宽。我希望布局不要变宽，我希望它扩大规模。
请看原始屏幕截图，那里是 100% 的布局，我不希望这样。我想将布局限制为较小的尺寸，并让浏览器放大。例如，我如何在我发布的示例 sn-p 中做到这一点？如何使红色框放大并保持我想要的尺寸？例如，通过修改初始比例很容易，但移动设备有不同的尺寸。
嗨 @Ahmed - 据我所知，没有直接的方法可以使用 CSS 操作浏览器缩放。您确实获得了可以调整缩放的 javascript 插件（通过更改，例如字体大小），但视口比例取决于设备。参见例如stackoverflow.com/questions/1055336/…

【解决方案2】：

使用媒体查询来定位特定设备。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：

我正在定位。我可以得到适当大小的布局，这不是问题，问题是如果图层是例如640 像素宽，我看到它周围的空白区域，而不是放大。

【解决方案3】：

你应该使用这个：

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

这将确保布局可以自行调整，而无需实际声明宽度。

【讨论】：

更新问题。我刚刚试过你的答案，它也不起作用。布局肯定没有调整。