Question

我正在创建这个单页作为响应式设计测试，它在大多数浏览器和移动设备（到目前为止我已经检查过）中看起来很好，除了IE / Windows Phone。我使用IE 11的仿真工具栏来模拟Windows手机，并且有一个水平滚动条滚动到右侧出现的奇怪空白区域。

我在网页上搜索了多余的边距或填充但却无法找到。我也试过添加

html, body { 
  overflow-x:hidden; 
}

但这似乎也不起作用。这真的很奇怪。但是，如果我添加

，它就会摆脱空间

html, body { 
  overflow-y:hidden; 
}

但是这也会使整个页面与空间一起折叠。有谁知道出了什么问题？

我还应该补充一点，它在纵向视图中看起来很好，但在横向上它有滚动条和空白区域。

Answer 1

首先，＆＃39; windows phone＆＃39;桌面IE 11（v1）中的仿真不是实际Windows手机浏览器的仿真器。

vbn是正确的，该网站在Windows Phone上看起来很好。我的猜测是你的开发机器不支持触摸，因此有正常的鼠标＆＃39;滚动条很宽，不像触摸滚动条那么薄。

作为专门处理自适应SPA应用程序的人，您可以更好地调整浏览器的大小，而不是尝试使用任何F12＆＃39;模拟＆＃39;设备模式。它们都不是很准确。您可以通过调整浏览器大小来了解您的RWD是否正常工作。

你应该总是在设备上进行测试，我知道并不总是适合所有人。根据我的经验，这是必须的。您不需要100台设备。我有5个核心设备，iPhone，iPad，小型和小型;大型Android，Windows Phone和Surface。触摸是必不可少的BTW，这些设备上的浏览器以不同的方式运行，如滚动条。

如果您无法在真实设备上进行测试，请查看BrowserStack之类的内容。您无法获得真正的触摸响应感，但您可以看到事物布局是否正确或您的代码是否有异常。访问http://modern.ie免费订阅3个月即可试用。

Answer 2

尝试将整个页面包装在div中并将其居中：

<body>
<div class="container">

your entire page

</div>
</body>

CSS：

.container {
margin-left:auto;
margin-right:auto;
left:0;
right:0;
width:95%;
}

将宽度设置为您想要的任何值。