2016-01-26 97 views
1

我试过所有可能的视口元标记,但似乎没有任何工作。 任何人都可以帮助我吗?iPhone视口元标记宽度=设备宽度不起作用

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

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

UPDATE:由于科里的答案。我终于发现问题不在元标记中,似乎问题在于页面中涉及的标题。请参阅标记答案以供参考。

+0

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。尽管您已经提供了一个示例链接,但如果链接无效,那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。 –

回答

3

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

enter image description here

1

此图片未设置为设备宽度媒体查询中引起问题。

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

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

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

欣赏你的答案伴侣。它起作用,因为科里回答b4你,标记他的答案:) –

相关问题