Android Webview 视口(viewport)问题

Question

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

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

所以我设置视口(viewport)宽度

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

如果我通过移动版 chrome 浏览器访问网页。它工作正常。 如下图

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

我不知道为什么我设置了查看端口更改。 此外，我使用的是 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);
    }
}