6

I've been working on my first responsive design, and I'm having some trouble when viewing it on my iPhone. When I open a page on the iPhone, it's a little zoomed in to the left – just enough to miss text on the far right.

You can find the website here. The viewport-meta tag looks like this:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

It looks fine on my computer and on my iPad. Any and all help is appreciated.

4 Answers 4

15

Try this viewport, it works great on my website:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">
4
  • Didn't work, unfortunately. Probably something in the CSS, then? Commented Apr 18, 2012 at 23:21
  • Most likely. You probably have some content that is sticking out of the page.
    – bobek
    Commented Apr 18, 2012 at 23:24
  • Just had a look at your site from my iPhone. It's definitely css. Make sure you don't have any fixed values for width, but rather %.
    – bobek
    Commented Apr 18, 2012 at 23:42
  • This worked but the fonts on my app are really small so it doesn't zoom on iPhones any longer.
    – alkadelik
    Commented Jul 23 at 16:11
1

Found it. I had put width:100%; and padding:0 10px; on the .wrapper element under @media only screen and (max-width: 600px). Changed it to width:96% and padding: 0 2%;, and it worked like a charm.

Thanks for the help!

1
  • 1
    It might have worked for you, but have you tested how it looks on different devices? Android, Windows phone, small screens? Making the content fit the zoom I think is not solving te problem at all.
    – Bart Burg
    Commented Jan 15, 2015 at 9:39
1

Try to add width:100%; overflow:hidden; to both body and html elements. If your page load differently, its definitely a css issue.

1

See if you are using 100vh in your CSS anywhere. If you are using 100vh it counts the menu bar and bottom toolbar as part of the 100vh. See https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.