viewport标签在iPad上没有任何作用

Question

与许多其他人一样，我对iPad上的横向模式有疑问。肖像很好，但旋转到横向使其放大到200％，我的网页的一部分“掉落”的屏幕是不必要的。

网页的相关部分（使用Javascript绘制的画布）是823 x 690像素（CSS），应该很适合iPad的分辨率2048 x 1536（设备）。

我找到了很多建议使用类似（扩展版本）的答案：

<meta name="viewport" content="width=device-width, maximum-scale=1, 
    minimum-scale=1, initial-scale=1, user-scalable=no"/>

对于网站在横向模式和纵向模式下的显示方式，这根本不起作用。我尝试过的事情是（遵循互联网上的许多建议）：

• 仅使用有限数量的视口设置（例如，width = device-width和initial-scale = 1）
• 使用height = device-height而不是width = device-width
• 使用1.0而不是1
• 使用其他缩放因子，如0.5或2
• 上述
的组合

无论我做什么都没关系，没有什么变化，我真的在这里感到茫然，感到非常愚蠢，因为它似乎适用于其他所有人。

非常感谢任何想法做什么！

Answer 1

更改iPad纵向和横向并不会固有地改变＆＃34;缩放＆＃34; （除非通过CSS或元标记中的媒体查询明确告知这样做;您不会告诉它这样做）。

首先，从经典元标记开始：<meta name="viewport" content="width=device-width, initial-scale=1.0">

其次，没有参考页面，CSS或HTML来检查托管绘图画布的父标记;但我的假设如下：

你写道：

  

并且应该非常适合iPad的2048 x 1536（设备）分辨率。

iPad的设备分辨率和网页分辨率之间存在差异。这是CSS像素和设备像素之间的差异（阅读更多http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html）。长话短说：即使iPad Air仍然是1024x768 CSS像素屏幕尺寸。我怀疑你的容器div正在强制重新调整大小/缩放或者我们根本无法看到的东西。

有了更多信息，我或其他人可能会有所帮助。