Html 让我的网站在手机上默认缩小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3597977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get my website to be zoomed out by default on mobile phones
提问by Kredns
So I want users to be able to see my background on my website. Currently my websites width is 925pxand when you view the website in a mobile browser (e.g. iPhone, Opera Mini) it is zoomed in on the text and the user can't see the background.
所以我希望用户能够在我的网站上看到我的背景。目前我的网站宽度925px，当你在移动浏览器（例如iPhone，Opera Mini的）查看该网站是在文本和用户看不到的后台放大。
I've tried using the meta viewporttag unsuccessfully. How do I get my website to be zoomed out by default on mobile browsers?
我尝试使用该meta viewport标签失败。如何在移动浏览器上默认缩小我的网站？
EDIT:
编辑：
Here is the code I've tried so far:
这是我到目前为止尝试过的代码：
<meta name = "viewport" content = "width = device-width">
回答by webinista
I know this is an old question, but I am answering anyway in case someone else needs the answer.
我知道这是一个老问题，但无论如何我都会回答，以防其他人需要答案。
As of September 2011, Opera Mini is still using version 2.5 of the Presto rendering engine. Viewport isn't available in Opera until Presto 2.7. (Opera Mobile, our smart phone browser doessupport viewport.)
截至 2011 年 9 月，Opera Mini 仍在使用 Presto 渲染引擎的 2.5 版。视口在 Presto 2.7 之前在 Opera 中不可用。（Opera Mobile，我们的智能手机浏览器确实支持视口。）
Try this:
尝试这个：
<meta name="viewport" content="initial-scale=0.25">
When you include width=device-width, the browser 'magically'** finds the content area and adjusts it to fill the width of the device. If you want the background to peek through, you'll need to shrink the entire page to fit within the viewport.
当您包含 时width=device-width，浏览器会“神奇地”** 找到内容区域并调整它以填充设备的宽度。如果您想让背景一览无余，您需要缩小整个页面以适应视口。
Leaving <meta name=viewport>out entirely will also work, but you will typically see less of the background image.
离开<meta name=viewport>完全是出于也将工作，但你通常会看到背景图像的少。
Ideally, however, you should also use media queries to create a site that works at a variety of widths.
但是，理想情况下，您还应该使用媒体查询来创建可在各种宽度下工作的站点。
** Using heuristics of some kind that a browser developer would be able to explain better than I can.
** 使用浏览器开发人员能够比我更好地解释的某种启发式方法。
回答by Nomad77
After much trial and error I got the following to work correctly on iPhone 5.0.1 and Android 2.3.6. The site was designed for a 480 width. Depending on the width of your site you have to play around with the width value for the iPhone.
经过多次反复试验，我得到以下内容在 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" />
回答by donohoe
I'm surprised meta viewportdidn't work for you (on Mobile Safari). Can you post what you used?
我很惊讶它meta viewport不适合你（在 Mobile Safari 上）。能发一下你用的吗？
UPDATE: This generally works for me... give it a try:
更新：这通常对我有用......试试看：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
Ifthat works, you can then start playing with the scale values to let users zoom if they want to, and by how much.
如果可行，您就可以开始使用比例值，让用户根据需要进行缩放，缩放多少。
