-1

As new phones have a really big resolution display (ex: 1280) I'm wondering what is the smartest way to do a CSS media query dedicated ONLY to Phones with 1280. The issue I have is that if I do this : 

@media only screen and (min-width:1136px) and (max-width:1280px)

I will include some desktop reslutions sizes and I want to have a different UI between desktop view and mobile view.

Is there any good practice/solution somewhere for this ?

Thanks a lot !

Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
user1713964
  • 1,209
  • 2
  • 14
  • 26
  • 1
    If the difference in UI is because of the way the user will interact with the site (touch vs keyboard/mouse), then using media queries to detect resolutions is the wrong way of going about this. – cimmanon Apr 04 '13 at 13:28
  • The UI diff is more about content organization than features offered by the support. Some contents can be important on desktop, they don't on mobile. – user1713964 Apr 04 '13 at 13:47
  • 1
    That still doesn't change the fact that resolution has nothing to do with what kind of device it is (mobile, desktop, microwave, etc.). Mobile users tend to become frustrated when presented with less features than the desktop version. – cimmanon Apr 04 '13 at 13:53
  • It depends what's the scope of the project and who is the target. Not sure you'd love having a mobile website with easter promoting adds while looking for your plane take off hour :) This is truly interesting to discuss but not really in this subject. – user1713964 Apr 04 '13 at 22:40
  • 1
    I'm certain I don't want to look at ads at all on any device. – cimmanon Apr 05 '13 at 00:38

3 Answers3

1

for the mobile devices just try to check min-device-width and/or max-device-width.

Another possibility is to check the pixel ratio of the device you're targeting

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • The pixel-ratio can help a little such as specifying retina displays. But it becomes harder to find a good way about device-width. For example we have the new Galaxy S4 with a device size of 1080 x 1920. It becomes difficult to manage combinations with max-width and max-device-width and isolate phones to PCs. I found also the handheld media type and unfortunatly not supported by most of phones on the market. – user1713964 Apr 04 '13 at 13:22
1

A great way to target devices like smartphones would be to use min-device-width and max-device-width, e.g.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Smartphone queries here */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* iPad queries here */
}

Alternatively, you could use Detect Mobile Browsers for mobile/tablet detection.

dsgriffin
  • 66,495
  • 17
  • 137
  • 137
  • True but as I said @Fabrizio with newest phones, their max-device-width begins to play on desktop device width – user1713964 Apr 04 '13 at 13:25
  • @user1713964 Check out this instead then, if you're open to a jQuery alternative - http://www.jquery4u.com/mobile/detect-mobile-devices-jquery/ – dsgriffin Apr 04 '13 at 13:32
0

User agent sniffing.

This is not good practice, but if you sniff for useragents serverside and serve different content (html/css/js) to the client (phone, desktop) it works.

Better you should ask yourself what features your UI is designed for, like touch, screen size etc. To detect this you can use CSS media queries and http://modernizr.com/

Johan
  • 18,814
  • 30
  • 70
  • 88