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

时间:2013-01-29 10:26:07

标签: android html html5 mobile

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

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

我该怎么做?

5 个答案:

答案 0 :(得分:12)

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

  1. <head>代码中添加此viewport meta tag

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

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

  2. <style>代码中添加此<head>代码:

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

    认为这将确保所有图片都不会比应用程序的webview视口更宽。

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

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

答案 1 :(得分:3)

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

答案 2 :(得分:1)

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

像往常一样设置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 */
}

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

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

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