如何为带有标题图像的移动设备设置HTML,这需要整个浏览器宽度？

Question

我担心的是我必须为移动设备建立一个网站.在概念中,图像设置为标题.

现在的问题是:不同的智能手机具有不同的显示分辨率.

例如840x560,480x320或800x480.

我需要写什么作为元标签,CSS等,以使"每个"现代智能手机中的图像适合显示器？

我希望我的关注得到清楚的描述.

谢谢,克里斯

Answer 1

因为width: 100%;似乎得到了很好的支持,我建议:

#header {
    width: 100%;
    padding: 0;
    margin: 0;
}
#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}


<div id="header">
    <img src="header.png" />
</div>

要么

#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}

<img src="header.png" />

设置只是该width装置的图像的宽度/高度比将被浏览器保存.但请记住,将图像处理(缩放/调整大小)传递给手机的浏览器可能会导致不太引人注目的人工制品.

如果您可以选择使用不同大小的图像,则可以使用@media查询调用它们:

<link rel="stylesheet" href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/>
<link rel="stylesheet" href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/>
<link rel="stylesheet" href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>

并且,在那些样式表中,定义:

mobileStylesheet1.css

#header {
background: transparent url(path/to/840pxImage.png) 0 50% no-repeat;
}

mobileStylesheet2.css

#header {
background: transparent url(path/to/800pxImage.png) 0 50% no-repeat;
}

mobileStylesheet3.css

#header {
background: transparent url(path/to/480pxImage.png) 0 50% no-repeat;
}

Answer 2

除了 David Thomas 的回答之外，您可能还需要设置视口元标记：

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

请记住，该特定元标记还有其他属性，但这两个属性可能就是您需要的。

您还可以将宽度指定为像素值。“device-width”本质上是将浏览器视口的宽度设置为手机的宽度，这可能就是您想要的。之后，任何元素上的简单 100% 宽度都应该使其完全适合手机。您可以将其与 David Thomas 的 @media 查询答案结合起来，以实际交换更适合手机的图像，这样就不会涉及太多缩放。大多数“现代”移动浏览器都支持视口元标记。（这实际上取决于您对现代智能手机的定义是什么。）

另请参阅：width=device-width 在移动 IE 中不起作用