12

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

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

我怎样才能做到这一点？

4

5 回答 5

14

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

  1. 在标签内添加这个视口元<head>标签：

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

    这应该使页面以合理的大小呈现。

  2. <style>在标签内添加这个<head>标签：

    <style>
img {
    max-width: 100%;
}
</style>

    我认为这将确保所有图像都不会呈现比应用程序的 webview 视口更宽的范围。

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

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

于 2013-01-29T10:48:44.950 回答
3

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

于 2013-01-29T10:33:33.410 回答
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 */
}
于 2013-01-29T10:30:24.757 回答
0

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

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

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

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

有关更多详细信息，您可以访问本教程 -通过简单的步骤学习响应式设计

于 2013-01-29T10:36:35.330 回答