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

Question

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

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

编辑:

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

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

Answer 1

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

截至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>了完全也将工作,但你通常会看到更少的背景图像.

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

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

Answer 2

经过多次试验和错误后,我得到以下内容才能在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" />