Html 对“initial-scale=1.0”感到困惑 - iphone 3GS vs 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7152474/
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
Confused on "initial-scale=1.0" - iphone 3GS vs 4
提问by Jonathan Coe
I'm having some problems getting my website to scale correctly for mobile devices.
我在让我的网站为移动设备正确缩放时遇到了一些问题。
We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently:
我们有一个设计为最小宽度为 640 像素的网站，最大宽度。我目前有元标记：
<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />
Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".
现在 - 我感到困惑的部分是，如果我使用“initial-scale=1.0”，显然该站点将按 1:1 缩放，并且在 iphone 3Gs 上看起来很糟糕（只能看到一半的站点）。现在，在 Iphone 4 上（具有 640 像素宽的分辨率），如果我使用“initial-scale=1.0”，它将在 640 像素处正确缩放。
Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?
或者，如果图形是 480px，3Gs 需要 scale=.667 而 iOS 4 需要 1.3，对吗？
So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc.
那么你如何让网站完美地适应边缘到边缘呢？浏览器可以检测设备宽度然后相应地设置比例吗？？有很多不同的设备宽度...... android、旧款 iphone、黑莓等。
Getting quite frusterated :( Feel like i'm missing something important that I should already know.
变得非常沮丧:(感觉我错过了一些我应该已经知道的重要事情。
EditIt seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.
编辑似乎“初始缩放”元标记应该相对于视口缩放站点，然后使用 width=device-width 设置实际视口大小。
The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???
我似乎遇到的问题是视口没有缩放以适应设备，无论我使用什么标签，它都保持在 640px。我在这里错过了什么？？？
采纳答案by Jonathan Coe
Ok, i've figured it out... essentially.
好吧，我已经想通了......基本上。
Because my design is actually 2x the size of the viewport (sort of), the key is just to use "initial scale = 0.5". It works correctly on both devices (3Gs and 4), and more or less correctly on android devices, etc.
因为我的设计实际上是视口大小的 2 倍（有点），所以关键是使用“初始比例 = 0.5”。它在两种设备（3G 和 4）上都能正常工作，在 android 设备等上或多或少能正常工作。
Kind of tricky, and it seems like there should be a better way to do this, but for the time being, it works.
有点棘手，似乎应该有更好的方法来做到这一点，但就目前而言，它有效。
Thanks all who provided input.
感谢所有提供意见的人。
回答by Rick Strahl
I think the main issue with the original message is that semi-colons don't appear to work on iPhone 4+. It only works with commas as separators (or only the device-width setting). Other browsers seem to be more tolerant.
我认为原始消息的主要问题是分号在 iPhone 4+ 上似乎不起作用。它仅适用于逗号作为分隔符（或仅设备宽度设置）。其他浏览器似乎更宽容。
The following works reliably for me:
以下对我来说可靠：
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1" />
You'll also want to disable the body and document from scrolling horizontally:
您还需要禁用正文和文档水平滚动：
body, html
{
overflow-x: hidden;
}
Good link for more info on Mozilla Site:
有关 Mozilla 站点更多信息的良好链接：
回答by londonwebguy
"width" is to tell the browser how wide your website is at 100% zoom. if you have designed your website to be fluid, you could specify "device-width" here, and the browser won't need to use any zooming, as your layout is designed to fit any viewport width.
“宽度”是告诉浏览器你的网站在 100% 缩放时有多宽。如果您将网站设计为流畅，则可以在此处指定“设备宽度”，浏览器不需要使用任何缩放功能，因为您的布局设计为适合任何视口宽度。
"initial-scale" is for overriding the default behaviour of some devices to zoom in or out on your website so that the website width (which you specified above) matches the screen width. setting this to 1 basically says "don't zoom for this, use scroll bars if my website is too wide for the screen, and leave blank space at the sides if it's too narrow". if you do want your website to fill the screen width exactly, don't use initial-scale.
“初始比例”用于覆盖某些设备的默认行为以放大或缩小您的网站，以便网站宽度（您在上面指定的）与屏幕宽度相匹配。将此设置为 1 基本上是说“不要为此缩放，如果我的网站对于屏幕来说太宽，请使用滚动条，如果太窄，则在两侧留空白”。如果您确实希望您的网站完全填充屏幕宽度，请不要使用初始比例。
回答by profMobi
I believe that the answer is that you want to tell the web browser to always scale the site to 640 pixels. I would even turn off the ability for users to scale the site so that stray drags don't re-size everything.
我相信答案是您想告诉 Web 浏览器始终将站点缩放到 640 像素。我什至会关闭用户缩放站点的功能，以便杂散拖动不会重新调整所有内容。
Try this:
尝试这个：
<meta name="viewport" content="width=640; user-scalable=no;" />
