ViewPort无法在Android上运行

Question

我在Android标签和手机上测试html文件。不同分辨率的视口 我使用了meta ViewPort：

<meta name="viewport" content = "width=device-width , target-densityDpi=device-dpi , user-scalable = no , initial-scale=.51,maximum-scale=0.51,minimum-scale=0.51"/>

但它不起作用意味着不缩放我的BG图像。

我也尝试了它：

<meta name="viewport" content = "width=device-width;target-densityDpi=device-dpi ; user-scalable = no ;initial-scale=.51;maximum-scale=0.51;minimum-scale=0.51"/>

唯一的区别是';'但就此而言，logcat显示Viewport被忽略

我不明白为什么会发生这种情况

这是我的css文件：

body {
background-repeat: no-repeat;
margin: 0;

}

div { width: 1280px; height: 670px; }
home {

background-image: url('../images/abc_title.png');
width: 1280px;
height: 670px;
background-repeat: no-repeat;

}
abc_slide {

position: relative; background : transparent;
width: 129px;
height: 76px;
background: transparent; width : 129px; height : 76px;
margin-top: 80px;
margin-left: 80px;
        border: thin;

}
song_slide {

position: relative;
background: transparent;
margin-top: 80px;
margin-left: 80px; width : 129px;
height: 76px;
width: 129px;
    border: thin;

}

HTML：

通过这些设置，我在标签2 7上看到了以下情况：

添加无重复滚动后

已经存在。

Answer 1

首先，逗号是content属性中的正确分隔符，如下所示：

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, user-scalable=no, initial-scale=.51, maximum-scale=0.51, minimum-scale=0.51"/>

你还有一些额外的空间。我希望Android上的WebKit实现可以容忍，但无论如何要小心。 ：）

默认情况下，Worklight生成的Android环境仅启用normalScreens。我怀疑，根据您显示的宽度/高度数字以及它是平板电脑，您有一个“大屏幕”，用Android说话。请查看AndroidManifest.xml以了解以下部分：

<supports-screens
    android:smallScreens="false"
    android:normalScreens="true"
    android:largeScreens="false"
    android:resizeable="false"
    android:anyDensity="false"
    />

根据Android documentation进行必要的调整。

您还可以在android:scrollbars="none"中的WebView XML元素中设置AndroidManifest.xml。请参阅second answer to this question。

Answer 2

要在webView中使用视口，您需要启用setUseWideViewport和setLoadWithOverviewMode，否则WebView会忽略元视口标记。

mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);

参考：Pixel perfect UI in the WebView