ViewPort 不适用于 Android

Question

我正在安卓标签和手机上测试 html 文件。不同分辨率的视口 我使用元视口：

<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 显示视口被忽略

我不明白为什么会这样

这是我的 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

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

<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进行必要的调整。

您还可以在AndroidManifest.xml 中的WebView XML 元素中设置android:scrollbars="none"。见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