Question

我使用下面的html。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes"/>
    <title>Sample</title>
</head>
<body>
<div style="width: 250px; height: 50px; background: green;">250px</div>
<div style="width: 500px; height: 50px; background: yellow;">500px</div>
<div style="width: 1000px; height: 50px; background: red;">1000px</div>
</body>
</html>

我将UseWideViewPort设置为true

WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);

根据我的理解，1000px的div应该占据整个宽度，500px的div应该缩放到宽度的一半，250px的那个应该占宽度的四分之一。

但真正发生的是500px和1000px超出屏幕尺寸的那个。为了清楚起见，我附上了截图。我也尝试更改user-scalable=no但没有效果。 Screenshot

我该如何解决这个问题？

Answer 1

发生的事情是，因为你有

<meta name="viewport" content="width=device-width, user-scalable=yes"/>

并指定div中的宽度，然后将一个实际值（例如1000像素）应用于div。根据{{3}}：

当值为true且页面包含视口元标记时，将使用标记中指定的宽度值。

如果你想要实现宽度相对于彼此的div，一个更简单的ruote将使用百分比，如：

<body>
   <div style="width: 25%; height: 50px; background: green;">25%</div>
   <div style="width: 50%; height: 50px; background: yellow;">50%</div>
   <div style="width: 100%; height: 50px; background: red;">100%</div>
</body>

如果您的目标是拥有宽广的＆＃39; viewport，就像桌面一样，你应该传递true，而不是如上所述指定元标记：

如果页面不包含标记或未提供宽度，则将使用宽视口。

webview中的视口不起作用

1 个答案: