I've added the following to a web page to make it non-zoomable on mobile devices and to try to make is display at native resolution:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,开发者_如何转开发user-scalable=no" />
However when viewing that on my Samsung Galaxy S and printing out screen.width
from JavaScript it gives 320 in portrait orientation and 533 in landscape orientation. How can I get it to use the the native resolution of 480×800, or is that just not possible?
I'd like to do this so that the quality of images isn't degraded by being displayed at a zoom of 1.5 (initially pixelated then having a smoothing filter applied).
This viewport syntax implements the desired behavior:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
By specifying the target density to match the native density of the display, it renders at native resolution (1pixel=1pixel) and you don't see smoothing or other artifacts.
Works for me on Samsung Galaxy S, but YMMV on other devices and Android/Browser versions.
See below for more info:
http://developer.android.com/guide/webapps/targeting.html#ViewportDensity
I think if you fixe the maximum (and minium) scale to the inital scale like this
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Once the meta viewport is in place, then you can still have a zoomed-out page with tiny texts if anything in the html/css of the page lets the mobile browser think it should be displaying something wide. Even an ordinary <p>tag with enough text inside</p>
can make the whole page zoom out. One way of rounding up the culprits is to make changes to you css, slashing stuff out using { display: none }
until you find the exact section that is causing the trouble.
Tip for MGWT users: MGWTSettings.ViewPort will not set "target-densitydpi" correctly. This must be in your html file.
精彩评论