Solved

detect actual Android or iphone display resolution

Posted on 2013-12-21
4
616 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 53

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 29

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

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

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.
Learn to move / copy / export exchange contacts to iPhone without using any software. Also see the issues in configuration of exchange with iPhone to migrate contacts.
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…

734 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