新聞財經娛樂♬資訊 News Economy

my samsung android phone is 480*854 resolution after reporting from javascript code as follows

window.screen.availWidth;
window.screen.availHeight;
window.devicePixelRatio;

Question-1
-----------------
The device pixel ratio is 1.5 ,  So  it should be reported in unit of point (pt) for those width and height, right ? And what is the best way to detect the phone device resolution ?

So I try to test it and put the background image well fit into the body of html5 page
using css with background-size:720pt 1281pt ; (i.e 480*1.5pt 854*1.5pt)  But it just  almost close to fit to the whole body  becoz the width of display image  is not like 480*1.5pt , it seems like the width is 440*1.5pt and the image height is well fitted .So I believe what I wrote above might be something  wrong,  Please point it out if so,



Please advise

Duncan

use the media query to load the specific css   (this way you don't download extra data on a mobile)
i.e.

// common css here....
<link rel..... style.css/>

//laptop one here...

@media screen and (max-width:1300px)
{
   <link rel.....href="laptop.css>//
 }

//  tablet here ..

@media screen and (max-width:690px)
{
 <link rel.....href="tabletportrait.css>//
}

//  /smartphone here ..

@media screen and (max-width:400px)
{
     <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />//
 }