Viewport in webview does not work

StackOverflow https://stackoverflow.com/questions/23187120

  •  06-07-2023
  •  | 
  •  

문제

I use the below 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>

I set UseWideViewPort to true

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

From what I understand, the div with the 1000px should occupy the entire width, the one with 500px should scale to half the width and the one with 250px should occupy one-fourth the width.

But what really happens is the one with 500px and 1000px goes beyond the screen size. I have attached the screenshot for clarity. I also tried changing user-scalable=no with no effect.Screenshot

How should I fix this?

도움이 되었습니까?

해결책

What is happening is that since you have the 

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

and you specify the width in your divs, then an actual value of, say, 1000 pixels is being applied to the div. According to documentation:

When the value is true and the page contains the viewport meta tag, the value of the width specified in the tag is used.

If you want to achieve divs with widths in respect to one another, an easier ruote would be using percentages, something like:

<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>

If you aim to have a 'wide' viewport, like a desktop, you should pass true and not specify a meta tag as mentioned:

If the page does not contain the tag or does not provide a width, then a wide viewport will be used.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top