元标记视口内容宽度和初始比例有问题

时间:2015-04-29 05:44:49

标签: angularjs html5 web-applications viewport meta

我正在使用angularjs开发一个webapp。当移动设备语言设置为除中文以外的任何语言时,webapp加载完全正常。我调试了很多,发现由于index.html中的元视图端口标记,Web应用程序未加载的问题。只要从meta视口标记中删除宽度和初始比例,当语言设置为中文时,Web应用程序就会在移动设备中成功加载。 navigator.language =" zh-CN"当navigator.language设置为中文时,我可以知道造成这个问题的原因吗?还有其他替代解决方案让我的webapp工作吗? 在index.html中使用以下元标记,如果语言设置为中文,则无法正确呈现我的应用  

但是,如果我删除宽度和初始比例,那么如果语言是中文,应用程序将正确呈现。

<meta name="viewport" content="maximum-scale=1.0, user-scalable=no, minimal-ui"/>.

我也厌倦了一个示例应用程序,但也存在问题。请参阅下面的index.html,您可以在任何Android手机中轻松重现该问题。我在S3和S4设备中尝试过。请帮我解决这个问题。您可以复制以下index.html并将其加载到您的Apache服务器中以查看问题。从DOM元素中删除宽度和初始比例的那一刻,您可以看到应用程序加载完美。

请帮助解决这个问题

2 个答案:

答案 0 :(得分:0)

尝试合并initial-scaleuser-scalable比例,而不是设置minimum和/或maximum。例如:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

您无需使用minimal-ui。 Apple在iOS8中放弃了对此的支持。

答案 1 :(得分:0)

设置maximum-scale或设置user-scalable="no"绝不是一个好主意,因为它会阻止人们进行缩放,这可能是他们需要做的。

当您删除这些内容并仅使用视口时会发生什么会很有趣:

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

我无法看到语言会如何导致这种情况发生,但它显然正在发生,这听起来像一个非常有趣的边缘情况。

您是否也尝试过其他与中文相关的lang设置,例如“zh”或“zh-Hans”?

我也想知道它是否与字体有关,因此与this question相关?