Responsive media queries for iPhone 4,5 and 6?

HTML & CSS
1

Does anybody knows how to create responsive media queries for iPhone 4, 5 and 6 and iPad without breaking the desktop website?

2

You should not be building for specific devices, but rather make an device-agnostic design that works across all screen widths.

3

So what you are actually telling me using the default media queries based on device/monitor width size?

4

Based off the viewport size.

Essentially ensure that the following code tag is in your page:

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

Then all you need basically is to just go on your desktop, take the browser and move the window down to ensure it doesn’t break at any size.

If it does, write a media query based off width, not device width (I will have an article published on Sitepoint soon on this subject hopefully), and fix the error you see.

2 Likes
5

Perfect, when will i be able to see this tutorial?

Thanks!

6

Dunno; the editor has to edit it and see if it’s what he’s after.

I’m #1 on the que so it’s my turn next. Worst case scenario is that if he doesn’t go for it, I will publish on my own website and I will link it here for you. Keep an eye on Sitepoints homepage though for recently published articles. Hopefully early next week.

1 Like
7

Thanks Ryan!

Send me a PM if you don’t mind so i will take a look!

Have a nice day.

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.