android - 在平板电脑设备上填充

我正在开发一个具有自定义灯箱的网站。当用户激活灯箱时，活动灯箱后面会出现一个灰色的半透明div。我注意到在平板电脑（iOS和Android）上，滚动条所在的右侧大约有10像素的边距。我尝试了以下CSS，但尚未将其删除：

@media (max-width: 767px) {
  #gray_out {
    margin-left: -20px;
    margin-right: -20px;
  }
}

html, body {
    margin:0;
    padding:0;
}

div, p, a, li, td { -webkit-text-size-adjust:none; }

这是台式机上的外观：


  


这是平板电脑上的外观：


  


注意鲜黄色的条子。

提供灰色的div代码：

z-index: 99999;
background-color: rgba(0, 0, 0, 0.74902);
left: 0px;
right: 0px;
margin: 0px;
width: 802px;
height: 2034px;
position: absolute;
top: -0.00006103515625px;

最高值是使用jQuery生成的。任何建议将不胜感激。

我无法提供到该站点的直接链接，在这种情况下，由于问题的性质，jsFiddle无法提供帮助。忍受我。

最佳答案

事后看来，似乎有一个更优雅的解决方案，但最终这是我想出的：

@media (max-width: 1000px) {
  #gray_out {
    margin-left: -20px ;
    margin-right: -20px;
    width: 105%;
  }

    #home_footer, #home_header, #home_row_1, #home_row_2, #home_row_3 {
        margin-left: -15px;
        margin-right: -15px;
        width: 102%;
    }
}

删除填充/边距是行不通的，并且10px的条实际上干扰了比灰色div更大的干扰，因此我只是在移动设备上将所有内容扩展了很多。我已经在iPad的几个不同版本和浏览器堆栈上的几个Android设备上对其进行了测试，它似乎运行良好。

关于android - 在平板电脑设备上填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22028364/