这是我的website，如果您在浏览器中查看此内容并减小浏览器宽度，那么它看起来不错。
但是，如果你在实际的移动设备中查看它（我在我的iPhone上测试过它），它会减少一半。我不知道为什么会这样。我也玩了很多元标记。目前我有这个，
<meta name="viewport" content="width=device-width" />
我也试过这样做，
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
但是这使我的网站可以水平滚动到实际宽度的两倍。 （它只显示空白）。
我也有，
overflow: hidden;
overflow-y:auto;
在我的媒体查询中，我不知道为什么会发生这种情况。
答案 0 :(得分：2)
<div class="main-headline"></div>您有固定宽度width: 1140px;，而margin-left: 150px;和padding-left: 190px;仅使用padding来解决您的问题。
答案 1 :(得分：0)
首先将元标记设置为<meta name="viewport" content="width=device-width; initial-scale=1">
然后，您的header .main-headline有950宽度导致问题。
答案 2 :(得分：0)
具有类＆＃34; .main-headline＆＃34;的元素div具有1140px的固定宽度，在左侧创建该空间，尝试减少它或使用最大宽度：100％媒体查询。
干杯
答案 3 :(得分：0)
可以尝试添加：
<body width=100%>
或
<div width=100%>
在Safari上，您还可以通过开发＆gt;来检查您的网站在其他设备和iPad上的外观。进入响应式设计模式（确保在Safari Pref的高级设置中启用了“开发”）。
答案 4 :(得分：-1)
.main-headline 会因为您使用带边距的宽度100％而删除。