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

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -