默认情况下,我的网站会在手机上缩小

时间:2010-08-30 05:00:20

标签: iphone html css opera-mini

所以我希望用户能够在我的网站上看到我的背景。目前我的网站宽度为925px,当您在移动浏览器(例如iPhone,Opera Mini)中查看网站时,它会放大文本,用户无法看到背景。

我尝试使用meta viewport代码失败了。如何在移动浏览器上默认缩小我的网站?

修改

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

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

3 个答案:

答案 0 :(得分:19)

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

截至2011年9月,Opera Mini仍在使用Presto渲染引擎的2.5版本。在Presto 2.7之前,Opera不提供Viewport。 (Opera Mobile,我们的智能手机浏览器 支持视口。)

试试这个:

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

当您添加width=device-width时,浏览器“神奇地”**找到内容区域并调整它以填充设备的宽度。如果您想要查看背景,则需要缩小整个页面以适合视口。

完全退出<meta name=viewport>也可以,但您通常会看到较少的背景图片。

但是,理想情况下,您还应该使用媒体查询来创建以各种宽度工作的网站。

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

答案 1 :(得分: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" /> 

答案 2 :(得分:1)

我很惊讶meta viewport没有为你工作(在Mobile Safari上)。你能发布你用过的东西吗?

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

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

如果有效,您可以开始使用比例值进行播放,以便用户可以根据需要进行缩放,以及缩放比例。