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 queries拨打电话：

<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 not working in Mobile IE

Answer 3

我认为更好的解决方案是使用图像+标题背景颜色（或图像模式）。

例如：

<div class="header">
  <img src="image.png">
</div>

image.png的宽度/高度是固定的，标题类的类似于：

.header {
  display:block;
  background-color:#;
  background:url("") repeat;
}

然后它应该适合所有设备。但是如果你想要更好的东西，也许你应该做一个MVC模型，并为每个设备（或最重要的^^）提供视图

祝你好运！

Answer 4

从代理字符串中识别手机并提供不同的图像。

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

4 个答案:

mobileStylesheet1.css

mobileStylesheet2.css

mobileStylesheet3.css