HTML 5 WebApp可伸缩性元标记 [英] Html 5 WebApp Scalability Meta Tag
问题描述
我目前正在使用Html 5 WebApp.除了可伸缩性(缩放)外，整个应用程序都运行良好.我已经在WebApp的页面上放置了以下Meta标签，
I am currently working on a Html 5 WebApp. The entire app works perfectly fine, with the exception of scalability (Zooming). I have placed the following Meta tag on my WebApp's page,
<meta name="viewport" content="user-scalable=yes; width=device-width; height=device-height; initial-scale=1.0;" />
经过大量研究，我得出的结论是，这些Meta标签主要用于iPhone版本的safari.但是，我遇到的问题是，当iPhone用户在我的网站上时，在将WebApp书签到主屏幕之前，该用户无法放大或缩小(使用捏合动作).似乎会产生放大效果的唯一方法是用户更改手机的方向.
After much research I have come to the conclusion that these Meta tags are primarily for the iPhone version of safari. However, the problem that I am experiencing is, while an iPhone user is on my site, previous to bookmarking the WebApp to the home screen, the user is not able to zoom in or out (using the pinching motion). The only way that that seems to create a zooming in effect, is if the user changes the orientation of their phone.
我已经在Apple设备和Android设备上测试了此meta标签.当user-scalable = no时，Android设备禁用缩放功能；当user-scalable = yes时，则允许缩放功能；而Apple设备从不允许在两个测试用例中的任何一个中进行缩放.
I have tested this meta tag with both an Apple device, and an Android device. The Android device disabled zooming when user-scalable = no, and allowed zooming when user-scalable=yes, while the Apple device never allowed zooming in either of the two testing cases.
我的问题是:
- 这些元标记是否主要是为iPhone Safari浏览器设计的?
- 我是否正确使用了上面的元标记?
-
如果我不是，那么使用元标记的正确方法是什么?
- Are these Meta Tags primarily designed for iPhone Safari browsers?
- Am I correctly using the above Meta Tag?
If I am not, What is the proper way to use the Meta Tag?
谢谢您的建议！
推荐答案
我可能是错的，但我认为您根本不需要user-scalable行.您是否尝试过删除它并查看会发生什么?像这样的东西通常就足够了:
I could be wrong, but I don't think you need the user-scalable line at all. Have you tried removing that and seeing what happens? Something like this is usually sufficient:
<meta name="viewport" content="width=device-width" />
...然后可能从那里进行调整.如果您想使用所有属性，请尝试使用逗号而不是分号来分隔它们.例如:
… and then maybe tweak from there. If you do want to use all the attributes, try separating them with a comma rather than a semi-colon. For example:
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
这篇关于HTML 5 WebApp可伸缩性元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
