javascript - Unsharp window with phonegap and Jquery/html canvas -


i trying make first app seems if whole screen out of focus. resolution (on iphone 6+) 1080x1920. when create object size $(window).innerwidth x $(window).innerheight, object end being 320x568? have standard meta tags not working.

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

any idea on how solve this?

this simple. using window.innerwidth, returns css pixels (also known device-independent pixels). on iphone 3,4,5 it'll return 320px, on iphone 6 , 6+ it'll return 375px , 414px respectively. unless iphone users have enabled accessibility feature called display zoom. it'll 320px , 375px iphone 6 , 6+ respectively.

you should use above dimensions rendering html , using css. e.g. want full-screen-wide div? set width 320px (of course, can set 100%).

but if rendering images (including canvas), should supply them @ native device resolution. if want non-blurry full-screen-wide img, set width 100% or 320px point src at least 640px-wide image on iphone 4&5. full-width non-blurry image on iphone 6+ has @ least 414*3 = 1242px.

but here's bad news. 1242px image taken @ face value , downscaled 1.15 1080px, making not pixel perfect. supplying 1080px image not help, because up-scaled 1242px , down 1080px during different render phases in os / browser engine. news won't matter either way @ ginormous resolutions. won't able see it.

so if you're rendering full-width canvas, don't use css pixel count innerwidth. use native pixel count multiplying window.innerwidth window.devicepixelratio. returns '2' on mbpr , iphone 6 , 3 on iphone 6+.

hope helps.


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -