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

Question

像许多其他人一样，我对 iPad 上的横向模式有疑问。纵向很好，但旋转到横向会使它放大到 200%，并且我的网页的一部分不必要地“掉落”在屏幕上。

网页的相关部分(使用 Javascript 绘制的 Canvas )为 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"/>

不知何故，这对网站在横向模式和纵向模式下的显示方式完全没有影响。我尝试过的事情是(遵循互联网上的许多建议):

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

不管我做什么，什么都没有改变，我真的很茫然，感觉很愚蠢，因为它似乎对其他人都有效。

非常感谢知道该怎么做!

Answer 1

改变 iPad 纵向和横向并不会固有地改变“缩放”(除非通过 CSS 或元标记中的媒体查询特别告知这样做；您没有告诉它这样做)。

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

其次，没有引用页面、CSS 或 HTML 来检查托管绘图 Canvas 的父标记；但我的假设如下:

你写:

and should fit nicely in the iPad's resolution of 2048 x 1536 (device).

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

有了更多信息，我或这里的其他人可能会提供进一步的帮助。