Improve company productivity with a Business Account.Sign Up

x
?
Solved

detect actual Android or iphone display resolution

Posted on 2013-12-21
4
Medium Priority
?
651 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 55

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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article is about the challenges faced by Android app developers.
Today, unlike web development, the mobile landscape is complex enough for a software engineer and Android is posing more challenging environment thanks to its fragmentation issues on hardware and software fronts.
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.
In this video I will demonstrate how to set up Nine, which I now consider the best alternative email app to Touchdown.

588 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