Android Web View 视图端口问题

Question

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

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

所以我设置了视口宽度

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

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

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

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

Android Web View 视图端口问题

Android Web View view port issue

html

mobile

android

viewport

android-webview