我有一个布局:
我面临的问题是它太宽了。我需要它的最大宽度为 640 像素。
我知道如何设置定义最大宽度的 CSS，但随后发生的是布局上限为 640 像素，并且未按比例缩放。所以我留下了空白。
截图是高分辨率的 Nexus 7。我想将我的布局设置为最大 640 像素，并将其放大到屏幕尺寸。
我试过:
<meta name="viewport" content="width=640, maximum-scale=2, minimum-scale=1">
它工作得很好，我看到一个 640 像素宽的布局缩放到屏幕上。然而，它在 iPhone 5 等分辨率较小的设备上看起来很糟糕，因为它强制 iPhone 具有 640 像素宽的视口(viewport)。
有没有一种方法可以根据移动设备的屏幕分辨率设置最小 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
如何让红色充满屏幕？我如何让它按比例放大以便水平填充？
最佳答案
您可以使用viewport 来设置“device-width”，即:
<meta name="viewport" content="width=device-width">
并另外包含一个最小宽度。然后使用媒体查询调整宽度大于 640px 的设备的显示效果。
此外，请务必以百分比形式指定内容元素的宽度。这样，内容将由浏览器缩放以填充可用空间。
关于html - 如何确保移动布局不会太宽和放大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18021669/