Question

I am making a mobile web page and struggling through dealing with various screen sizes and basically I want to make my page the width of the actual screen not the browser.

Because of the way mobile browsers work, the default “width” of most browsers is 320 pixels when the following meta tag is set:

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

What can I do to make it so that the page is the full resolution of the screen and not the “resolution” of the browser?

There must be some simple solution..

Note: setting the initial-scale flag to 2 made the page smaller than 320 pixels on both my iphone and android phone (640 and 480 pixels wide respectively) and setting it to .5 made the page 640px wide on both devices, but zoomed in on the android device. It gave the desired effect on the iphone..

My page: mmhudson.com/index1.html

Answer 1

The property you’re missing from that list is target-densitydpi=device-dpi.

http://developer.android.com/reference/android/webkit/WebView.html

By default, WebView scales a web page so that it is drawn at a size
that matches the default appearance on a medium density screen. So, it
applies 1.5x scaling on a high density screen (because its pixels are
smaller) and 0.75x scaling on a low density screen (because its pixels
are bigger).

And

device-dpi – Use the device’s native dpi as the target dpi. Default
scaling never occurs.