ie mobile/windows phone右侧的空白答案

【问题标题】：Blank space on right of ie mobile / Windows phoneie mobile/windows phone右侧的空白
【发布时间】：2014-04-28 03:27:54
【问题描述】：

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

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

html, body { 
  overflow-x:hidden; 
}

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

html, body { 
  overflow-y:hidden; 
}

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

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

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

【问题讨论】：

我相信 Windows 产品会为滚动条保留空间，即使不需要或显示滚动条也是如此。
真的吗？如果是这样，我想我无能为力。
我用的是Windows Phone，看起来不错，右边一点空白都没有。
真的吗？这很奇怪。你用的是 IE 吗？
尝试添加宽度：100%；到html，body css。也许IE需要强制。此外，出于测试目的，添加：border-style:solid;border-width:3px;这将允许您直观地看到浏览器在哪里调用页面或 div 的边缘。然后在完成后将宽度设置为 0px。

标签： html css internet-explorer mobile responsive-design

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案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%;
}

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

【讨论】：

我刚试过这个，它确实在页面左侧增加了均匀的空间。不完全是我想要的，但确实有点帮助。