Why does layout spread on Iphone?

Question

iPhone

On a real fifth iphone, the layout looks like this:

And in emulation like this:

I don’t understand at all why and how to fix it? Has anyone experienced this?

Answer 1

Check if the viewport meta tag is correct. Responsive should be like this:

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

Answer 2

min-width will help you to limit the width of the blocks. But in fact, for small resolutions, you need to change the layout using media-queries:
https://developer.mozilla.org/en-US/docs/Web/Guide...
habrahabr.ru/post/119127
mediaqueri.es
+ note that you need to focus not on the real screen resolution, since on iPhones retina and you should read this cool guide: habrahabr.ru/post/237931