Solved

detect actual Android or iphone display resolution

Posted on 2013-12-21
4
606 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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 400 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 28

Assisted Solution

by:chilternPC
chilternPC earned 100 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

A brief look into what is, how to use, and how to make GIFs
Here, we have shared an easy step by step tutorial on how to download instagram images and videos on PC, Android Mobile and iOS mobile.
This video is in connection to the article "The case of a missing mobile phone (https://www.experts-exchange.com/articles/28474/The-Case-of-a-Missing-Mobile-Phone.html)". It will help one to understand clearly the steps to track a lost android phone.
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…

825 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