Search code examples
javascripthtmlcssviewportmeta-tags

iPhone viewport meta tag width=device-width not working


I tried all possible viewport meta tags but nothing seems to be working. Can anyone help me on this?

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

Site is http://sival.dk/ . You can run on chrome iphone simulator. When you load the page you feel that the page is fit, but try scrolling through x position, you could see that the page is not fitted entirely in iphone

UPDATE: Thanks to Cory's answer. I finally found that the problem was not with meta tag, seems the problem was with the title involved in the page. See Marked answer for reference.


Solution

  • In cases like this, I usually use the chrome developer tools to look for any element whose padding or margin is making the page wider than the device width. In this case, it was your <h1 class="site-title">sival</h1>. See the screenshot below. Adding margin: 0 to the styles for that element (or fixing the element in another way) should solve your problem.

    enter image description here