我想创建一些HTML页面，可以在不同的移动设备上显示。我希望它们能自动适应不同的移动屏幕大小。
HTML页面包括文本和图像。图片可能比600x450大，但如果移动屏幕是（例如）280x320，则图像应自动调整其尺寸以适应。
我该如何做到这一点？
如何创建HTML页面，使其可以自动调整图片以适应不同的移动屏幕尺寸？
11
- Ekky
9
1Web视图会自动调整HTML页面以适应其边界。 - Lavakush
1@Ekansh：你要在Webview中显示吗？如果是的话，就不用担心HTML页面了。 - Shadow
@Ekansh：webview是智能手机应用的组件，用于在应用程序内显示HTML页面。 - Paul D. Waite
1谢谢提供的信息，我之前以为 WebView 是移动设备上的网页浏览器，实际上我是一名网页开发人员，想要创建可以在不同移动设备屏幕上自适应的 HTML 页面。 - Ekky
1@Ekansh：不用谢。当它们在手机上运行时，网络浏览器仍然被称为网络浏览器，这一点还是好的。 - Paul D. Waite
显示剩余4条评论
5个回答
15
如果你所谈论的网页仅包含文本和图片，那么我认为每个 HTML 页面需要做的就是：
在
<head>标签中添加这个viewport meta 标签：在
<head>标签内添加此<style>标签：
<meta name="viewport" content="width=device-width">
这应该使页面以合理的大小呈现。
<style>
img {
max-width: 100%;
}
</style>
我认为这将确保所有的图片都不会呈现比应用程序 webview 的视口更宽。
（如果这样不起作用，请尝试使用 width:100%;。这肯定会让所有的图片显示为与视口一样宽，因此不会更宽。）
然而，你的问题有点太笼统了：我们可能会写一本覆盖所有可能性的书。你能否使问题更具体，针对你实际正在处理的代码？
- Paul D. Waite
2
媒体查询是实现你想要的效果的最佳方法。
按照通常的方式设置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 */
}
- evilscary
0
这里有很多选项，大部分都太详细了，无法在一个问题中讨论。
没有“自动”完成此操作的方法 - 必须手动编码。我能想到三个选项，需要更多的调查：
- 使用User-Agent http头标识连接的设备并将用户重定向到所需的网站模板。
- 使用JavaScript执行与上述相同的操作。
- 使用CSS控制每个对象的大小。您可以强制每个对象成为整体屏幕大小的百分比，而不是固定值。 CSS还提供了一种根据给定屏幕大小指定样式的方法：http://www.w3.org/TR/css3-mediaqueries/
- JAC2703
1
使用User-Agent http头来识别连接设备，并将用户重定向到所需的网站模板。不，HTML是设计为在各种大小的视口中布局自身。如果您这样做，那么您就错了。 - Paul D. Waite
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接