手机/ 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

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

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个月。

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%;
}

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

手机/ Windows Phone右侧的空白区域

问题描述

2 个解决方案

解决方案1
1 2014-03-21 11:43:56

解决方案2
0 2014-03-20 23:41:51

手机/ Windows Phone右侧的空白区域

问题描述

2 个解决方案

解决方案1 1 2014-03-21 11:43:56

解决方案2 0 2014-03-20 23:41:51

解决方案1
1 2014-03-21 11:43:56

解决方案2
0 2014-03-20 23:41:51