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

Ekk*_*kky 10 html mobile html5 android

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

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

我怎样才能做到这一点?

Pau*_*ite 12

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

  1. 标记内添加此视口元<head>标记:

    <meta name="viewport" content="width=device-width">
    
    Run Code Online (Sandbox Code Playgroud)

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

  2. <style>标记内添加此<head>标记:

    <style>
    img {
        max-width: 100%;
    }
    </style>
    
    Run Code Online (Sandbox Code Playgroud)

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

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

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