Question

我有一个布局：

mobile layout

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

我知道如何设置定义最大宽度的CSS，但接下来会发生的是布局上限为640px，并且它没有缩放。所以我留下了空的空间。

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

我试过了：

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

它工作得很好，我看到一个640px宽的布局缩放到屏幕上。然而，在像iPhone 5这样的小分辨率设备上看起来很糟糕，因为它迫使iPhone拥有640px宽的视口。

有没有办法让最小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

如何让红色填满屏幕？如何将其放大以使其水平填充？

Answer 1

您可以使用viewport到“设备宽度”，即：

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

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

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

Answer 2

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

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

Answer 3

你应该使用这个：

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

这将确保布局自身调整，而不必实际声明宽度。

如何确保移动布局不会太宽并放大？

3 个答案: