I am having a issue when I try to make a web app responsive to screen-size.

I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.

My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:

@media screen and (max-width:768px){
    //enter code here`code here
}

Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.

thanks in advance

I am having a issue when I try to make a web app responsive to screen-size.

I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.

My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:

@media screen and (max-width:768px){
    //enter code here`code here
}

Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.

thanks in advance

• javascript
• html
• css
• responsive-design

• 3 The Blackberry 10 is a phone? Usually high-resolution phones don't report their actual resolution to the browser. Neither do high resolution tablets, for that matter. In fact, the iPad 3 isn't 768x1024, it's 1536x2048. – Chris Herbert Commented Apr 17, 2013 at 1:41
• Actually, you can grab the display sizes, pixel densities, orientation and other elements quite easily using javascript/CSS media queries, you just need to know how to use them. – nickhar Commented Apr 17, 2013 at 2:17
• @media screen and (min-resolution: 300dpi) { … } – Jason Lydon Commented Apr 17, 2013 at 2:22
• Chris, in my javascript i checked the width and height and those were the number that came back for the 2 devices, im assuming thats the same thing the css considers when loading the styles – coffeesam Commented Apr 17, 2013 at 17:45

3 Answers 3

The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, pletely unnecessary and will only lead you to utter madness.

You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:

 // if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.

But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser binations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.

You can also restrict your styles to the height:

@media screen and (max-width:768px) and (max-height:1024px){
    // iPAD
}

You should add the meta tag viewport in your html header :

<meta name="viewport" content="width=device-width, initial-scale=1">

To sum up :

width = device width x pixel density

(Galaxy S4 : 1080 = 360 x 3)

This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)

Some good reading :

• https://developer.mozilla/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• http://screensiz.es/phone
• http://www.html5rocks./en/mobile/mobifying/#toc-meta