CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
Don Rhummy
Don Rhummy

Reputation: 25870

Better to handle desktop vs phone vs tablet by screen size or detect tablet/phone/desktop?

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?

Upvotes: 1

Views: 1573

Answers (1)

Trevor
Trevor

Reputation: 13457

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:

Upvotes: 1

Related Questions