Solved

detect actual Android or iphone display resolution

Posted on 2013-12-21
4
597 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
Comment Utility
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
Comment Utility
<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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
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.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now