1

Most of the questions about responsive design have the answer to use screen size in a media query to display a mobile design vs desktop design instead of either combining this with a test for phone/tablet/desktop browser or just that test (either server side or in JavaScript).

But many phones now have displays that are 1080p or higher and some browsers will report this in actual pixels (I believe iPhone safari does not). Even with that many pixels, a desktop design for that resolution would not be appropriate on a phone and maybe not even a tablet.

Also, there may be differences in JavaScript (desktop might have mouse-over actions, etc).

What is the best way to handle all of this? Is out really better to just use screen size in a media query? or a combination of this work server side detection? or something else entirely?

Don Rhummy
  • 24,730
  • 42
  • 175
  • 330
  • 2
    Use Media queries. User agents can lie. – Diodeus - James MacFarlane Aug 19 '14 at 18:04
  • @Diodeus but media queries for what? the phone could report a huge device width which would result in a desktop or tablet design showing on a phone – Don Rhummy Aug 19 '14 at 18:05
  • 1
    GET [BOOTSTRAP](http://getbootstrap.com/) ;) – Anonymous Aug 19 '14 at 18:09
  • With phones, points and pixels are used, so make your media queries in terms of pixels and it will work. Go to "Points Versus Pixels" section on this apple developer webpage: https://developer.apple.com/library/ios/documentation/2ddrawing/conceptual/drawingprintingios/graphicsdrawingoverview/graphicsdrawingoverview.html Also, you should distinguish landscape form portrait and determine the pixel - point ratio: http://stephen.io/mediaqueries/ – ctwheels Aug 19 '14 at 18:17
  • @ctwheels that is ios, but not every browser does the same thing (Amazon's kindle fire does not for example) – Don Rhummy Aug 19 '14 at 18:20
  • @DonRhummy, the only way to perfectly lay out your website for all devices would be with media queries, using js doesn't always work, and if js is turned off, it will not look pretty (some people don't know how to turn it on). Check this for Amazon kindle fire media queries: http://epubsecrets.com/media-queries-for-kindle-devices.php, better yet: http://docs.aws.amazon.com/silk/latest/developerguide/css3.html – ctwheels Aug 19 '14 at 18:25
  • 1
    Most devices report viewport size in terms of CSS pixels, which do not necessarily directly match with physical pixels on the screen - although there is obviously a correlation. User Agent sniffing is at best a flawed solution, you can only maintain the user agents for a subset of devices on the market now - and obviously can't maintain user agents lists for devices still to be launched, even those that might be announced tomorrow. The server has no way of querying the viewport size, much less if the reported size is CSS pixels or the actual device resolution. Media queries are the way to go. – pwdst Aug 19 '14 at 20:12

1 Answers1

1

Media queries are a standard way of dealing with Responsive Web Design. The viewport property of the <meta> tag allow developers to manage sizing and zooming. You can read more about it here (The Mozilla Developer Network is a great place to research these types of questions) and find documentation here. However, if you just want to get started quickly, read this tutorial.

The gist of it is this: include the following meta tag to prevent the mobile browser from displaying the website as a desktop browser would:

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

Here are some additional tutorials and frameworks that might help:

Trevor
  • 13,085
  • 13
  • 76
  • 99
  • What about changed javascript/events? e.g. if they want a mouseover menu bar on desktop and a tap-to-show menu bar on mobile? There would need to be a way to detect that and use the different code. Is it best just to us JS to detect which stylesheet was loaded (from the media query) and then load the proper code based on that? – Don Rhummy Aug 19 '14 at 22:33
  • I think detecting media queries in JavaScript is a little awkward (the only way I know of is to set css attributes per media query and parse those attributes in JavaScript). However, another option is to hide/show elements that respond to hover/click events based on the screen size. I've also heard recommendations that you avoid using hover events for essential functionality to simplify the experience and code. For example, you could have a click event that displays a menu in addition to a hover event; the hover event isn't essential, but enhances the experience for some desktop users. – Trevor Aug 19 '14 at 22:40
  • If you do want to detect touch devices with JavaScript, see this question [here](http://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript) – Trevor Aug 19 '14 at 22:42