Android Web View视图端口问题

Question

Android App有一个链接到网站的按钮。当我点击按钮时，我可以在Android Web View上看到网页。

当我通过Android应用访问网页时。我想看到所有这些，就像我正在查看一个大桌面屏幕。

所以我设置了视口宽度

<meta name="viewport" content="width=980">

如果我通过移动Chrome浏览器访问网页。它运作正常。 如下图所示

但是如果我通过Android Web视图访问网页。它适合移动设备的屏幕宽度 如下图所示

我不知道为什么查看我设置的端口更改。 另外，我正在使用Galaxy S7。

请提出任何想法。

Answer 1

您不应为内容提供特定的宽度。而是可以根据相应设备的像素密度设置宽度。

您可以为每个密度创建单独的样式表

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

或者，在一个样式表中指定不同的样式：

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}