Search code examples
htmliphoneresponsive-designmedia-queriesiphone-6

Iphone 6 page showing half width

I am trying to make my basic webpage responsive. I thought it was however on iPhone 6 the page only seems to render at half width.

Screenshot link

I have tried various different meta tags and cant seem to fix it.

Solution

  • I was having a lot of problems with the iPhone 6, I think because the device width and the pixel width are actually half of each other. i.e. the ppi is higeher, so if the scale is not set correctly it thinks the page is twice as wide.

    Anyway I think adding a minimum scale fixed my issue, here is my tag now

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

    You can check it on iPhone 6 if you like.
    http://www.platonicsapp.com/