iPhone viewport meta tag width=device-width not working

1
votes

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.

2
javascripthtmlcssviewportmeta-tags
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself. Although you have provided a link to an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem. - Paulie_D

2 Answers

3
votes

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

1
votes

This image is not set to device-width cause the problem within your media queries.

  <img src="http://sival.dk/wp-content/uploads/2015/09/Logo.png" width="450" height="168">

and this heading tag margin needed to be set.

<h1 class="site-title">sival</h1>