Viewport in iOS / Android WebView

0
votes

In the main HTML file, the following lines for viewport are specified:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">

Experiment:

I have tried to update the width from device-width to 640 and added the following codes to a JavaScript file on initialization.

alert("Viewport - Width: " + $(window).width() + "Height: " + $(window).height());
alert("Device - Width: " + window.screen.width + "Height: " + window.screen.height);

Result:

  1. Samsung Galaxy S3 (Resolution: 720 x 1280):
    (a) width=device-width & width=640:
    Viewport - Width: 360, Height: 615
    Device - Width: 720, Height: 1280

  2. iOS Simulator iPhone (Retina 3.5 - inch):
    (a) width=device-width:
    Viewport - Width: 320 Height: 460
    Device - Width: 320, Height: 480
    (b) width=640:
    Viewport - Width: 640 Height: 960
    Device - Width: 320, Height: 480

Question 1: It seems to me that Android WebView is not based on the viewport setting. In the testing result, the viewport's width is 360 instead of 720. Where is the value "360" comes from?

Question 2: The resolution in iPhone retina 3.5 is 640 x 960. Is it because retina display so it returns 320 and 480 for width and height respectively?

2
webviewviewportibm-mobilefirstscreen-resolution
Some resources: here and here. – Idan Adar
Thanks. Here is another useful link mentioning the viewport size for different devices. – red23jordan
The link is broken, there's an extra " at the end. If you this link help you solve your problem can you please write it as an answer and mark it as Answered? – Idan Adar

2 Answers

0
votes

Question 1: Look at AndroidManifest.xml Change "android:largeScreens" for true

0
votes

According to PPK, there are 3 viewport in mobile device. [Read more]

and what the window.screen.width get is the ideal viewport size, that is to say, the width of iPhone's ideal viewport size is 320px, while the Android's is 360px.

This is linked with screen density, for example, an Andorid device with 720px screen width will zoom in 2x to match it's ideal viewport size.