I have been trying to determine how the viewport -- and the contents within -- are affected by the viewport meta tag used for drawing content with WebView or with the native browser.
What I have run in to are some apparent inconsistencies. I created a small page (see below) with an image and some javascript for displaying the viewport size so I can visually see the scaling with the image as well as get the exact numbers.
First, a some observations:
- None of the viewport width numbers are exactly what I expected, just close.
- When the numbers are close to the device pixel count, the drawing is actually done one-for-one -- or at least is visibly looks that way.
- If the page size (document size) is under that of the viewport size, the viewport numbers shrink. That is, the viewport doesn't always necessarily represent the maximum possible visible space -- just the current visible space.
- Likewise, in the native browser, the viewport size is adjusted by the top bar. The size increases as it scrolls off the screen. The numbers given are for full screen display.
Device #1: Physical screen is 1024x600 and it's running Android 2.2.
- initial-scale=1.0 => 676x400
- initial-scale=1.0, width=device-width => 676x400
- initial-scale=2, width=device-width => 338x200
- initial-scale=2, width=device-width, target-densitydpi=device-dpi => 507x300
- initial-scale=0.5, width=device-width, target-densitydpi=device-dpi => 800x473
- initial-scale=0.9, width=device-width, target-densitydpi=device-dpi => 800x473
- width=device-width, target-densitydpi=device-dpi => 1014x600
- initial-scale=1.0, width=device-width, target-densitydpi=device-dpi => 1014x600
- initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1 => 2028x768
- initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no => 1014x600
Device #2: Physical screen is 800x480 and it's running Android 2.3.2.
- initial-scale=1.0 => 527x320
- initial-scale=1.0, width=device-width => 527x320
- initial-scale=2, width=device-width => 263x160
- initial-scale=2, width=device-width, target-densitydpi=device-dpi => 395x240
- initial-scale=0.5, width=device-width, target-densitydpi=device-dpi => 790x480
- initial-scale=1.0, width=device-width, target-densitydpi=device-dpi => 790x480
- initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1 => 1580x768
- initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no => 790x480
- width=1580, target-densitydpi=device-dpi => 790x480
- width=1580, target-densitydpi=device-dpi => 790x480
- width=1580, target-densitydpi=device-dpi, minimum-scale=0.1
=>790x480
Of these results, the following don't make sense:
- Device #1, items 5, 6, and 10
- Device #2, items 5, 8, 10, 11, 12
Does anyone know what's going on with those that don't make sense?
Does anyone know why many of the values are 10 pixels shy of match the physical pixels, but that result is as if they match? (e.g. 1.7 and 2.6)
Am I doing something wrong, or does it appear that it's impossible to zoom out beyond 1.0 unless the user is also allowed to scale and the minimum-scale value is set?
That is, even though the valid values are 0.01 to 10, initial-scale values under 1.0 are ignored unless you can also set the minimum scale.
The Android docs do say when user-scalable is no that the min/max scale values are ignored. That doesn't seem very useful. And 2.9-2.11 seem to show that you can't just calculate it yourself and set the width.
Finally, the HTML I'm using:
<html>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<head>
<meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" />
</head>
<body style="margin:0;">
<div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div>
<img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" />
<script>
$("#bl1").click(function(){
var pageWidth = $(document).width();
var pageHeight = $(document).height();
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight);
});
</script>
</body>
</html>
So... what am I missing?
See Question&Answers more detail:os
