duncanb7
asked on
detect actual Android or iphone display resolution
Dear Experts,
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks for all of your reply.
I am using javascript and detect window.screen.availWidth , window.screen.availHeight
& devicePixelratio to do css for all devices that will be more accurate
Duncan
I am using javascript and detect window.screen.availWidth , window.screen.availHeight
& devicePixelratio to do css for all devices that will be more accurate
Duncan
ASKER
So the link tag just work on phone device only with its width less than 880px, Right ?
How to let NOT to read other normal css file on phone device ?
for example,
<link rel.....href="file.css> // that is target to work only on laptop computer.
<link rel.....href="file2.css>//
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />//that is only work for phone device
Please advise
Duncan