Question

我想创建一些HTML页面，这些页面将显示在不同的移动设备上。我希望它们能够自动调整到不同的移动屏幕尺寸。

HTML页面包括文本和图像。图像可能大于600x450，但如果移动屏幕（例如）280x320，则图像应自动调整其大小以适应。

我该怎么做？

Answer 1

如果你所谈论的页面只包含文字和图片，那么我认为你需要在每个HTML页面中做的就是：

在<head>代码中添加此viewport meta tag：
```
<meta name="viewport" content="width=device-width">
```
这应该使页面呈现合理的大小。
在<style>代码中添加此<head>代码：
```
<style>
img {
    max-width: 100%;
}
</style>
```
我认为这将确保所有图片都不会比应用程序的webview视口更宽。

（如果这不起作用，请尝试使用width: 100%;。这肯定会使所有图像都与视口一样宽，因此不会更宽。）

然而，你的问题有点过于笼统：我们最终可能会写一本涵盖所有可能性的书。你能否更具体地说明你实际工作的代码？

Answer 2

这种技术被称为流动或自适应布局，有一个很好的介绍here

Answer 3

媒体查询是您做任何事情的最佳方式。

像往常一样设置html和样式表，但在CSS文档的末尾使用类似于下面代码的内容。您需要针对不同的设备宽度和布局计算出不同的查询，但这应该可以帮助您入门。

/* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /* Your adjusted CSS goes here */
}

/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /* Your adjusted CSS goes here */
}

Answer 4

这里有很多选择，在一个问题中谈得最详细。

没有“自动”方式 - 必须手动编码。我能想到的三个选项，需要更多调查：

使用User-Agent http标头标识正在连接的设备并将用户重定向到所需的网站模板。
使用JavaScript执行上述操作。
使用CSS控制每个对象的大小。您可以强制每个对象占整个屏幕大小的百分比，而不是固定值。 CSS还提供了一种基于给定屏幕大小指定样式的方法：http://www.w3.org/TR/css3-mediaqueries/

Answer 5

您可以使用媒体查询来使您的布局响应，意味着修复所有屏幕小，中，大。

有关详情，请访问本教程 - learn responsive design in easy steps

如何创建自动将图像调整为不同移动屏幕尺寸的HTML页面？

5 个答案: