Display weak webpage on Android with native resolution?

Question

I added the following to the webpage to make it inaccessible to mobile devices, and try to make this display in native resolution:

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

However, when viewing on my Samsung Galaxy S and printing screen.width with JavaScript, it gives 320 in portrait orientation and 533 in landscape orientation. How can I make him use my own resolution of 480 × 800, or is it just not possible?

I would like to do this so that the image quality does not deteriorate, displaying it with a magnification of 1.5 (originally pixelated using a smoothing filter).

Answer 1

This viewport syntax implements the desired behavior:

 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /> 

By specifying the destination density corresponding to the original display density, it displays the original resolution (1pixel = 1pixel), and you do not see anti-aliasing or other artifacts.

Works for me on Samsung Galaxy S, but YMMV on other devices and versions of Android / browser.

See below for more information:

http://developer.android.com/guide/webapps/targeting.html#ViewportDensity

Answer 2

I think that if you set the maximum (and minimum) scale to a so-called scale, like this

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

Answer 3

Once the meta-viewport is in place, you can still have an enlarged page with tiny texts if something in the html / css page allows the mobile browser to think that it should show something wide. Even a regular <p>tag with enough text inside</p> can scale down the entire page. One way to round criminals is to make changes to css by cutting out material using { display: none } until you find the exact section that causes the problems.

Answer 4

Tip for MGWT users: MGWTSettings.ViewPort will not set "target-densitydpi" correctly. This should be in your html file.