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

【问题标题】：How can I create HTML pages that automatically adjust their images to different mobile screen sizes?如何创建自动将其图像调整为不同的移动屏幕尺寸的 HTML 页面？
【发布时间】：2013-01-29 10:26:06
【问题描述】：

我想创建一些 HTML 页面，这些页面将显示在不同的移动设备上。我希望它们自动适应不同的手机屏幕尺寸。

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

我该怎么做？

【问题讨论】：

使用百分比而不是 PX？
Webviews 会自动调整 HTML 页面以适应其边界。
@Ekansh：你打算在 webview 中显示它吗？如果是这样，不用担心 html 页面。
okthanx 的信息，我认为 webview 是移动的网络浏览器，实际上我是网络开发人员，想要创建这样的 HTML 页面，可以在不同的移动屏幕上自动调整
@Ekansh：不客气。不，幸运的是，即使在手机上运行，网络浏览器仍然被称为网络浏览器。

标签： android html mobile

【解决方案1】：

如果您所说的页面实际上只包含文本和图像，那么我认为您在每个 HTML 页面中需要做的就是：

在<head> 标签内添加这个viewport meta tag：
```
<meta name="viewport" content="width=device-width">
```
这应该使页面以合理的大小呈现。
在<head> 标签内添加这个<style> 标签：
```
<style>
img {
    max-width: 100%;
}
</style>
```
我认为这将确保所有图像的渲染范围不会超过应用的 webview 视口。

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

但是，您的问题有点过于笼统：我们最终可能会写一本涵盖所有可能性的书。您能否将其更具体地用于您实际正在处理的代码？

【讨论】：

【解决方案2】：

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

【讨论】：

不错的文章，看起来很有帮助

【解决方案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 */
}

【讨论】：

【解决方案4】：

这里有很多选项，最详细的要在一个问题中讨论。

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

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

【讨论】：

"使用 User-Agent http 标头来识别正在连接的设备，并将用户重定向到所需的网站模板。" - 不可以。HTML 旨在将自己放置在各种大小的视口中。如果你这样做，那你就错了。

【解决方案5】：

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

有关更多详细信息，您可以访问本教程 - learn responsive design in easy steps

【讨论】：