css - Website for Android: what to do with low devicePixelRatio devices: tablets, smartphones, etc.? -
i'm struggling while now.
i did responsive website client, turns out his tablet (panasonic fz-a1) has 0.75 devicepixelratio, means, sais has 1024x768 pixels, displays less.
while find difficult understand, point in creating devices can display webpage properly, when fail @ doing that, i'm trying hard find proper way handle this.
here problem: 1px borders on elements randomly don't appear. obviously, don't appear on screen, because of 0.75 pixel scale. site responsive, browser 'lies' screen size - returns 1024x768, media queries in css working if big.
the meta tag in header <meta content="width=device-width, initial-scale=1.33" name="viewport"/> shouldn't answer, because not affect browser sais screen size, css responsivity not work properly.
i can't find in 'settings' regarding screen pixel ratio.
any appreciated. explanation, why product device <1 screen pixel ratio.
update:
in native android browser, there thing under 'special' settings, found, , makes work. called 'default scale', 'far','normal' , 'close' options. selecting 'close' fixes problem. again, default browser in android 4.03 not support of html5 features, , nice if find more generic solutions.
i had issue exact same tablet, , did in end.
i had tried use media selectors low-dpi screens, , html { zoom: 120% } looked pretty still missing few pixels off inputs.
in end did this, works great, ends setting width of viewport 1024 actual native resolution of toughpads.
note still did user-scaleable=no think it's going prevent click delay on mobile devices.
<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no"> <script type="text/javascript"> // try , show page nicer if have low dpi screen if(window.devicepixelratio < 1.0) { var newwidth = math.floor(screen.width * window.devicepixelratio); var viewportcontent = "user-scalable=no, width=" + newwidth; document.getelementbyid('viewport').setattribute('content', viewportcontent); } </script> i wish didn't have use javascript :(
Comments
Post a Comment