开发者

Display non-zoomable web page on Android at native resolution?

开发者 https://www.devze.com 2023-02-16 10:57 出处:网络
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:

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号