Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

detect actual Android or iphone display resolution

Posted on 2013-12-21
4
Medium Priority
?
645 Views
Last Modified: 2013-12-23
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
0
Comment
Question by:duncanb7
  • 2
4 Comments
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1200 total points
ID: 39734011
First, your images should be in px and not pt  (Pixels vs Points).  Points is a measurement for printing not display.

You would simply want to use a media query to detect the size of the viewport and display the appropriate image.   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries


@media (max-width: 300px) { 
   img.small{display:inline;}
   img.large{display:none;}
 }
@media (min-width: 301px) { 
    img.small{display:none;}
   img.large{display:inline;}
 }

Open in new window

<div class="main_image">
<img class="small" src="myimage_small.jpg">
<img class="large" src="myimage_large.jpg">
</div>

Open in new window

0
 
LVL 13

Author Comment

by:duncanb7
ID: 39734028
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

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>// that is target to  work only on laptop computer.
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />//that is only work for phone device

Please advise
Duncan
0
 
LVL 29

Assisted Solution

by:chilternPC
chilternPC earned 300 total points
ID: 39734073
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" />//
 }
0
 
LVL 13

Author Closing Comment

by:duncanb7
ID: 39736596
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
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Email is way too noisy, prone to hiding the important stuff, and really becoming unreliable for critical/timely communications. There are better ways to communicate.
There is a lot to be said for protecting yourself and your accounts with 2 factor authentication.  I found to my own chagrin, that there is a big downside as well.
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…
CodeTwo Sync for iCloud (http://www.codetwo.com/sync-for-icloud?sts=6554) automatically synchronizes your Outlook 2016, 2013, 2010 or 2007 folders with iCloud folders available via iCloud Control Panel. This lets you automatically sync them with…

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question