7

I've been using min-width: 600px as my breakpoint in my CSS media queries. My rationale was that at 600px and above I'd capture tablet devices (Kindle Fire, iPad, etc) and below 600px would capture all of phone devices.

It turns out that while the iPhone plays nice by doubling its pixels, but still reporting being 320px x 480px, there are a ton of Android phones out there with resolutions like 700px x 1280px. The trouble is, how do I capture these devices without giving them a tablet-like interface?

Normally I'd just let the content respond to the pixel resolution of the device, however, a 1280px layout on a 4.3in screen just doesn't look right, especially since my application deals with a lot of form elements, which on a phone you want to span the entire width, but on a tablet or desktop you do not.

Ian Christian Myers
  • 1,270
  • 9
  • 14
  • Similar question and possible solution here: http://stackoverflow.com/questions/10738479/css-media-query-to-handle-new-high-resolution-mobiles-whilst-ignoring-tablets – makenai Aug 26 '12 at 18:02
  • I detect mobile phones server-side using WURFL but it is probably overkill for You... also: http://stackoverflow.com/posts/7763277/revisions – Juris Malinens Aug 26 '12 at 18:02
  • @makenai - That won't quite work here because (max-width:800px) and (orientation:landscape) that won't capture, say, the Samsung Galaxy SIII which will be 1280px max-width. However, If I change it to 1280px max-width it _will_ capture the iPad, which isn't desirable. – Ian Christian Myers Aug 26 '12 at 18:12

2 Answers2

4

One good option is to tailor your media queries to your content, not arbitrary device pixel sizes, by using ems.

David Oliver
  • 2,424
  • 1
  • 24
  • 37
  • 1
    Thank you for pointing me to this, I'll give it a shot later, however I want to ask—if I'm setting my viewport to width=device-width and initial-scale=1, won't the ems just translate to whatever pixel base I set? – Ian Christian Myers Aug 26 '12 at 23:48
  • 1
    If you choose to set a base font size, yes. But the point is that you're choosing your width based on Xem, where X is a number suitable for a breakpoint for your particular content - not necessarily any particular device width. And this will take into account text-zooming. – David Oliver Nov 26 '13 at 03:32
  • This totally worked for me. – abalter Nov 02 '21 at 00:03
0

Please use responsive css framework to avoid this kind of problem. I would suggest using Foundation or Twitter Bootstrap

Lodder
  • 19,758
  • 10
  • 59
  • 100
Rasel
  • 9
  • 2
  • 8
    Bootstrap isn't the solution for everything. Believe it or not, but some people actually want to create custom, good looking websites. – Sebastian Nowak Jan 31 '15 at 18:59