最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Responsive CSS with high-res smart phones and tablets - Stack Overflow

programmeradmin0浏览0评论

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

Share Improve this question edited Apr 17, 2013 at 2:27 nickhar 20.9k12 gold badges63 silver badges77 bronze badges asked Apr 17, 2013 at 1:16 coffeesamcoffeesam 1211 silver badge9 bronze badges 4
  • 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
Add a ment  | 

3 Answers 3

Reset to default 6

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
发布评论

评论列表(0)

  1. 暂无评论