Html 5 WebApp可伸缩性元标记

Question

我目前正在开发一个Html 5 WebApp.除了可伸缩性(缩放)之外,整个应用程序都可以正常运行.我在WebApp的页面上放置了以下Meta标签,

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

经过大量研究后,我得出结论,这些Meta标签主要用于iPhone版的safari.但是,我遇到的问题是,当iPhone用户在我的网站上时,在将WebApp添加到主屏幕的书签之前,用户无法放大或缩小(使用捏合动作).这似乎创建放大效果的唯一方法是用户是否更改了手机的方向.

我已经使用Apple设备和Android设备测试了这个元标记.当用户可伸缩=否时,Android设备禁用缩放,当用户可伸缩=是时,允许缩放,而Apple设备从不允许放大两个测试用例中的任何一个.

我的问题是:

1. 这些Meta标签主要是为iPhone Safari浏览器设计的吗？
2. 我正确使用上面的元标记吗？

3. 如果我不是,使用元标记的正确方法是什么？

   提前感谢您的建议!

Answer 1

我可能是错的,但我认为你根本不需要这user-scalable条线.你有没有尝试删除它,看看会发生什么？这样的事情通常就足够了:

<meta name="viewport" content="width=device-width" />

...然后可能从那里调整.如果您确实想要使用所有属性,请尝试用逗号而不是分号分隔它们.例如:

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