android - 捏合/缩放视口(viewport)规范适用于 iPhone，但不适用于 Android

Question

不久前我在一家帆船公司制作了一个 WordPress 网站，xssailing.com并且当前将视口(viewport)设置为:

<meta name="viewport" content="user-scalable=yes;width=device-width; initial-scale=0.31; maximum-scale=1.0;"/>

该站点在计算机上运行良好，我可以在 iPhone/iPad 上进行缩放。当我用我的 kindle 访问该网站时，我无法像在其他网站上那样进行缩放。有什么想法吗？

谢谢!

Answer 1

你是对的，它不会缩放。使用默认浏览器在 Nexus S 上测试。

Safari 为这个标签定义了非常愚蠢的默认值(宽度正好是 960 像素，正好适合不再生产的旧 iPhone)。因此，您需要明确指定 minimum-scale。通过指定所有三个缩放参数(而不是 3 个中的 2 个)，您的页面可以很好地缩放:

<meta name="viewport" content="
user-scalable=yes;
width=device-width;
initial-scale=0.31; maximum-scale=1.0; minimum-scale=0.25"/>

在尝试缩放之前，还要等待整个页面完全加载。

---

请注意，这将是一个更强大的 Stack Exchange 问题，其中包含一个完整的最小示例，并且没有指向特定网站的垃圾链接。问题和答案的适用范围越广越好!