iPhone视口元标记宽度=设备宽度不起作用

时间:2016-01-26 15:11:31

标签: javascript html css viewport meta-tags

我尝试了所有可能的视口元标记,但似乎没有任何工作。 任何人都可以帮我吗?

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

网站为http://sival.dk/。你可以在chrome iphone模拟器上运行。当您加载页面时,您觉得页面适合,但尝试滚动x位置,您可以看到该页面未完全安装在iPhone中

更新:感谢Cory的回答。我终于发现问题不在于meta标签,似乎问题在于页面中涉及的标题。请参阅标记答案以供参考。

2 个答案:

答案 0 :(得分:3)

在这种情况下,我通常使用chrome开发人员工具来查找填充或边距使页面宽度大于设备宽度的任何元素。在这种情况下,这是你的<h1 class="site-title">sival</h1>。请参见下面的截图。将margin: 0添加到该元素的样式(或以其他方式修复元素)可以解决您的问题。

enter image description here

答案 1 :(得分:1)

此图片未设置为设备宽度,导致媒体查询出现问题。

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

并且需要设置此标题标签边距。

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