如何为移动设备设置HTML，包括一个占据整个浏览器宽度的标题图片？

Question

我的问题是我需要为移动设备构建一个网站，在概念上，图像被设置为标题。

问题是：不同的智能手机具有不同的显示分辨率。例如，840x560、480x320或800x480。

我需要编写什么样的meta标签、css等才能使图像适应“每个”现代智能手机的显示屏？

希望我的问题描述清楚了。

谢谢，Chris

- ChrisBenyamin

---

考虑到您希望减少“缩放”（从对@Vinzius的回复中推断），请查看我的答案编辑，并评估@媒体查询 是否有帮助。 - David Thomas

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;
}

- David Thomas

Answer 2

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

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

请记住，该特定meta标签还有其他属性，但这两个可能是您需要的。您还可以将宽度设置为像素值。 "device-width"本质上将浏览器视口的宽度设置为手机的宽度，这可能是您想要的。之后，在任何元素上简单地设置100％的宽度即可完美适应手机屏幕。您可以将其与David Thomas的@media查询答案结合使用，以实际替换更符合手机的图像，因此不需要进行太多缩放。大多数“现代”移动浏览器都支持viewport meta标签。（这实际上取决于您对现代智能手机的定义。）另请参见：width=device-width not working in Mobile IE

- Nate Bundy

Answer 3

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

例如：

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

图片 image.png 的宽度/高度是固定的，头部类别有以下内容：

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

那么它应该适用于所有设备。但是如果你想要更好的东西，也许你应该做一个MVC模型，并为每个设备（或最重要的设备）创建一个视图。

祝你好运！

- Vinzius

---

不，这是不可能的。它是一张图片，必须适合。 - ChrisBenyamin

好的，但它会缩放图像...所以我认为这不是一个好的解决方案。然而，尝试在图像上使用width:100%或某种JS脚本来识别屏幕宽度。 - Vinzius

Answer 4

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

- Prof. Falken

---

我没有给你的帖子点踩，但我可以想象是因为你推荐了浏览器嗅探（browser sniffing），这种方法非常不可靠，因为浏览器不能始终准确地识别自己，并且用户可以有意识地误导它们。对象检测（Object detection）通常是实现相同或类似目的的更成功的方法。 - David Thomas