如何让我的网站在手机上默认缩小?
所以我希望用户能够在我的网站上看到我的背景。目前,我的网站宽度为,当您在移动浏览器(例如iPhone,Opera Mini)中查看网站时,它会放大文字,并且用户看不到背景。如何让我的网站在手机上默认缩小?
我试过使用meta viewport
标记失败。如何让我的网站在移动浏览器上默认缩小?
编辑:
这是到目前为止,我已经试过代码:
<meta name = "viewport" content = "width = device-width">
我知道这是一个老问题,但无论如何我都会回答,以防其他人需要答案。
截至2011年9月,Opera Mini仍在使用Presto渲染引擎2.5版本。在Presto 2.7之前,视口在Opera中不可用。 (Opera移动,我们的智能手机浏览器确实支持视窗)
试试这个:
<meta name="viewport" content="initial-scale=0.25">
当你包括width=device-width
,浏览器“神奇” **找到的内容区域,并调整它来填充设备的宽度。如果您希望通过背景进行浏览,则需要缩小整个页面以适合视口。
离开<meta name=viewport>
完全可以工作,但你通常会看到较少的背景图像。
但是,理想情况下,您还应该使用媒体查询来创建适用于各种宽度的网站。
**使用某种浏览器开发人员能够比我更好地解释的启发式。
我很惊讶meta viewport
没有为你工作(在移动Safari浏览器)。你可以发布你使用的?
UPDATE:这一般适用于我......试试看:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
如果这样的作品,那么你就可以开始与刻度值播放,让用户放大,如果他们想以及多少。
经过多次试验和错误,我得到以下在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" />
我不得不把更大的宽度(1300),使其工作。 +1因为我很绝望。 – 2014-02-20 15:20:57
这让我感到非常紧张。感谢这个虽然很大的帮助 – locrizak 2011-10-25 19:30:52