Question

我开发了一个webapp并成功使用了viewport元素来适应不同设备的应用程序。以iPhone为例，我使用了这个：

<meta name="viewport" content="width=685,user-scalable=0" />

我的webapp在iPhone Safari浏览器上使用此视口看起来很好。因此我想，在PhoneGap作为AppStore应用程序的帮助下包装我的webapp会很容易。但到目前为止，我没有运气这样做。视口标记似乎完全被忽略。

所以这是我的问题： 视频标记在PhoneGap上是否具有特定宽度（如上例所示）？或者我是否必须将所有内容重新设计为响应式网页设计？

Answer 1

几个小时以来我一直在打架。使用最新版本的phonegap我这样管理：

在你的主java中，在super.loadUrl之前添加以下行（blablabla

    super.init(); 
    super.appView.getSettings().setUseWideViewPort(true);
    super.appView.getSettings().setLoadWithOverviewMode(true);

这仍然允许用户“双击”放大/缩小。所以用这个来修改你的meta：

＆lt; meta name =“viewport”content =“width = 685; target-density-dpi = device-dpi; initial-scale = 0.1; maximum-scale = 0.1; user-scalable = no;” /＆GT;

它适用于我的Phonegap 3.0和Android＆gt; = 4

Answer 2

使用这样的元标记将宽度自动设置为设备宽度：

<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>

希望有所帮助。

Answer 3

尝试将此添加到html的标题

<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>

这是你的config.xml：

<preference name="EnableViewportScale" value="true" />

Answer 4

试试这个 -

 < meta name="viewport" content="width=device-width; user-scalable=yes; initial-scale=0.1; maximum-scale=5; minimum-scale=0.5" />

PhoneGap忽略具有特定宽度设置的视口标记？

4 个答案: