Html 网页在移动设备上开始放大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14272420/
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
Webpage starts zoomed in on mobile devices
提问by EGHDK
I'm using this code on my webpage
我在我的网页上使用此代码
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
I would think the initial scale would make sure the webpage was zoomed out, but it doesn't. Any ideas?
我认为初始比例会确保网页被缩小，但事实并非如此。有任何想法吗？
I've tried this:
我试过这个：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
But, I need the width to be set to 1000px or it doesn't look correct.
但是，我需要将宽度设置为 1000px 否则它看起来不正确。
Answer:
回答：
<meta name="viewport" content="width=1000; user-scalable=0;" />
回答by Jeffery To
initial-scale=1.0tells the browser to set the zoom level to normal (i.e. not zoomed in or out). You only need width=1000:
initial-scale=1.0告诉浏览器将缩放级别设置为正常（即不放大或缩小）。你只需要width=1000：
<meta name="viewport" content="width=1000">
回答by EGHDK
Try this:
尝试这个：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or
或者
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
回答by Alexey Shevelyov
I also though that view port was the problem but after testing it I figured viewport was not the problem.
我也认为视口是问题，但经过测试后我认为视口不是问题。
The problem in my case was the CSS: fixed width, or width: 100% instead of width: auto. So if you find that viewport is not the problem - CSS would likely be your next guess.
我的问题是 CSS: 固定宽度，或宽度：100% 而不是宽度：自动。所以如果你发现视口不是问题——CSS 可能是你的下一个猜测。
Hope that helps!
希望有帮助！
回答by Rich
The answer is already here in the website that we are using.
答案已经在我们正在使用的网站上。
If you inspect element the StackOverflowand look for the metaviewportof it. You will see
如果您检查元素 theStackOverflow并查找metaviewport它。你会看见
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
So you are setting the widthand heightdepends on which is the width, and height of the screen in CSS pixels at a scale of 100%. The initial-scaleproperty controls the zoom level when the page is first loaded. And lastly minimum-scaleis an optional attribute for the viewport, and it defines the minimum zoom that website users are able to do.
因此，您正在设置width和height取决于以 CSS 像素为单位的屏幕宽度和高度，比例为 100%。该initial-scale属性控制页面首次加载时的缩放级别。最后minimum-scale是视口的可选属性，它定义了网站用户能够进行的最小缩放。
回答by Robert Fricke
I tried playing with
我试着玩
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
and it seems my site is indeed rendered 1000px wide at scale 1. However, since my phone's screen has no space for the site, the site continues outside the viewport resulting in the feeling that the site is zoomed in.
似乎我的网站确实在比例为 1 时渲染了 1000px 宽。但是，由于我的手机屏幕上没有该网站的空间，因此该网站继续在视口之外，从而导致网站被放大的感觉。
Setting this value makes the site 1000px wide zoomed out:
设置此值会使站点缩小 1000 像素宽：
<meta name="viewport" content="width=1000">
Is this your issue?
这是你的问题吗？
On a side note, 1000px sounds a bit wide for a mobile website, but I assume this website is not originally made for mobile devices?
附带说明一下，1000px 对于移动网站来说听起来有点宽，但我认为这个网站最初不是为移动设备制作的？
回答by Sundar
You can use this.
你可以用这个。
<meta name="viewport" content="width=100%">
回答by Moses Arepelli
In My Case I could successfully stop zooming of the screen by just adding the following code with no extras.
在我的情况下，我可以通过添加以下代码而没有额外的内容来成功停止缩放屏幕。
<meta name="viewport" content="width=device-width">
回答by Pranesh
Try out this will help you...This worked for me
试试这个会帮助你......这对我有用
<meta name="viewport" initial-scale=1.0 content="width=100%">
回答by nevi_me
I've had a similar problem. Try this:
我遇到了类似的问题。尝试这个：
<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>
I think it has to do with the minimum-scale, but I'm not very sure.
我认为这与最小规模有关，但我不太确定。
