即使视口元标记中的分辨率宽度为1536，ipad 3设备宽度始终为768？ [英] is the ipad 3 device-width always 768 even though the resolution width is 1536 in the viewport meta tag?
问题描述
我正在尝试了解ios设备的视口元标记。我创建了一个测试页面，在那里我插入了一个862px宽的图像。所以我将视口元标记为：
I am trying to understand the viewport meta tag for ios devices. I created a test page, where I inserted an image that is 862px wide. so i have the viewport meta tag as:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
然而在ipad 3上，分辨率宽度为1536像素，视口设置为相同数量的ipad 3的可见区域，862px图像被炸毁，并且宽度略大于可见区域。所以我必须水平滚动才能看到图像的其余部分。
Yet on the ipad 3, with a resolution width of 1536 pixels, and having the viewport set to the same amount of visible area of the ipad 3, the 862px image is blown up, and is a little larger in width than the visible area. so i have to scroll horizontally to see the rest of the image.
这让我觉得设备宽度正在返回768像素，这就是额外的一点点862像素图像的水平滚动。它为什么这样做？我需要考虑某种像素密度吗？
This makes me think that device-width is returning 768 pixels, and that accounts for the little bit extra of horizontal scroll for the 862 pixel image. Why is it doing this? Is there some kind of pixel density I have to account for?
更新
我尝试将宽度设置为数字宽度，与图像的精确宽度相同（在本例中为862）。因此网页是862X206，与图像相同，但它与将宽度设置为设备宽度完全相同。
I've tried setting the width to a numerical width, the same exact width of the image (in this case "862"). So the webpage is 862X206, the same as the image, yet it is doing the same exact thing as setting the width to device-width.
UPDATE 2
我创建了一个非常简单的页面，由于某种原因，带有862像素视口的空白页面导致我的ipad 3上的水平和垂直滚动，代码：
I created a very simple page, and for some reason a blank page with a viewport of 862 pixels causes horizontal and vertical scrolling on my ipad 3, the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=862, initial-scale=1.0">
</head>
<body style="width:100%; padding:0; margin:0">
</body>
</html>
此滚动导致视口不适合可视区域或屏幕大小。我不明白任何见解将不胜感激。谢谢。 **注意**我忘了将填充和边距的重置添加到0，它增加了8 px的保证金。
This scrolling is causing the viewport not to fit inside the viewable area or screen size. I dont understand. Any insight would be greatly appreciated. Thank you. ** Note ** I forgot to add a reset of the padding and margin to 0, it was adding 8 px of margin.
UPDATE 3
好吧，原来，我认为设备宽度会返回ipad 3的1536像素的分辨率宽度。显然，它会返回768像素的屏幕尺寸。
Ok, originally, I thought that the device-width would return the resolution width of 1536 pixels of the ipad 3. Apparently, it returns the screen size of 768 pixels.
任何视口宽度都大于768，让我在ipad上滚动3.为什么？如果您有一个1024像素的页面，并且您希望将其放入ipad 3的可见区域，如果将宽度设置为1024，初始比例设置为1，则不应使1024px视口适合可见区域？
Any viewport width greater than 768, gives me scrolling on the ipad 3. why? what if you had a page that was 1024 pixels, and you want to fit that into the visible area of the ipad 3. you set the width to 1024, the initial-scale to 1, shouldn't that make the 1024px viewport fit into the viewable area?
解决方案
好的，所以，如果你想让每个设备弄清楚如何缩放你的页面，你所做的只是省略初始规模。
Ok, so, if you want to have each device figure out how to scale your page, all you do is leave out the initial-scale.
所以如果我只设置宽度，使用任一设备宽度或数值，并省略初始比例，它会自动为您计算缩放。它只是有效。
So if I set just the width, using either device-width or a numerical value, and leave out the initial-scale, it automatically calculates the zoom for you. and it just works.
我的困惑在于宽度意味着什么，宽度意味着在应用比例之前的宽度，
所以如果我说：
my confusion lied in what the width meant, width means the width before the scale is applied, so if i say:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
缩放前的视口宽度为768，如果网页正文为862px，并且在应用比例因子1.0之后，内容乘以1.0,862 * 1.0，因此视口的宽度现在在该比例因子862px处缩放的内容的宽度。我希望我明白这一点。这就是我的困惑，是宽度的意思。
the width of the viewport before the scale is, 768, and if the webpage body is say 862px, and after the scale factor of 1.0 is applied, the content is multiplied by 1.0, 862*1.0, so the width of the viewport is now the width of the content scaled at that scale factor, 862px. i hope i understand this right. thats where my confusion was, was what width meant.
推荐答案
iPad 3的宽度为768px，每个px代表2个物理像素。据我所知，您可以在Javascript中考虑它但不在视口中（并且您可能不想这样做，因为那些768像素的物理尺寸与早期iPad相同）。
The iPad 3 is 768px wide, where each px represents 2 physical pixels. You can account for it in Javascript but not in your viewport as far as I know (and you probably don't want to, since those 768 px are the same physical size as the ones on earlier iPads).
这篇关于即使视口元标记中的分辨率宽度为1536，ipad 3设备宽度始终为768？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
