html - ie mobile/Windows phone右边空白

Question

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

我已经在页面上搜索了任何多余的边距或填充，但没有找到。我也试过添加

html, body { 
  overflow-x:hidden; 
}

但这似乎也不起作用。这真的很奇怪。但是，如果我添加，它确实会去掉空格

html, body { 
  overflow-y:hidden; 
}

但这也会折叠整个页面以及空间。有谁知道出了什么问题吗？

http://www.web-dex.com/testing/new.html

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

Answer 1

首先，桌面 IE 11 (v1) 中的“windows phone”仿真器不是实际 windows phone 浏览器的仿真器。

vbn 是对的，该网站在 Windows Phone 上看起来不错。我的猜测是您的开发机器不支持触摸，因此具有正常的“鼠标”滚动条，它很宽，不像触摸滚动条那样细。

作为专门研究响应式 SPA 应用程序的人，您最好将浏览器的大小缩小，而不是尝试对设备使用任何 F12“模拟”模式。它们都不是很准确。通过调整浏览器大小，您几乎可以 100% 地查看您的 RWD 是否正常工作。

您应该始终在设备上进行测试，我知道这并不总是适合所有人的选择。根据我的经验，这是必须的。您不需要数百台设备。我有 5 种核心设备，iPhone、iPad、小型和大型 Android、Windows Phone 和 Surface。触摸是必不可少的 顺便说一句，这些设备上的浏览器操作方式不同，例如滚动条。

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