2

我有一个布局：

移动布局

我面临的问题是它太宽了。我需要它最大 640px 宽。

我知道如何设置定义最大宽度的 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

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

4

3 回答 3

3

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

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

并且另外包括最小宽度。然后使用媒体查询来调整显示对于宽度大于640px.

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

于 2013-08-02T16:32:04.507 回答
2

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

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

于 2013-08-02T16:28:15.863 回答
1

你应该使用这个：

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

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

于 2013-08-02T16:46:39.560 回答