15

所以我希望用户能够在我的网站上看到我的背景。目前我的网站宽度是925px，当您在移动浏览器（例如 iPhone、Opera Mini）中查看网站时，它会放大文本，用户看不到背景。

我尝试使用meta viewport标签失败。如何让我的网站在移动浏览器上默认缩小？

编辑：

这是我到目前为止尝试过的代码：

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

3 回答 3

19

我知道这是一个老问题，但无论如何我都会回答以防其他人需要答案。

截至 2011 年 9 月，Opera Mini 仍在使用 2.5 版的 Presto 渲染引擎。在 Presto 2.7 之前，Opera 中的 Viewport 不可用。（Opera Mobile，我们的智能手机浏览器确实支持视口。）

尝试这个：

<meta name="viewport" content="initial-scale=0.25">

当您包含width=device-width时，浏览器会“神奇地”** 找到内容区域并对其进行调整以填充设备的宽度。如果您希望背景可以窥视，则需要缩小整个页面以适应视口。

完全<meta name=viewport>省略也可以，但您通常会看到较少的背景图像。

但是，理想情况下，您还应该使用媒体查询来创建一个可以在各种宽度下工作的站点。

** 使用浏览器开发人员能够比我更好地解释的某种启发式方法。

于 2011-09-21T20:09:57.963 回答
5

经过多次试验和错误，我得到以下在 iPhone 5.0.1 和 Android 2.3.6 上正常工作。该站点的设计宽度为 480。根据您网站的宽度，您必须使用 iPhone 的宽度值。

<meta name="viewport" content="width=520, target-densitydpi=high-dpi" />
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />
于 2012-05-20T04:11:36.000 回答
1

我很惊讶meta viewport没有为你工作（在移动 Safari 上）。可以发一下你用的吗？

更新：这通常对我有用......试一试：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

如果可行，那么您可以开始使用比例值，让用户根据需要缩放，以及缩放多少。

于 2010-08-30T12:57:17.953 回答