在平板设备上填充

时间:2014-02-25 23:18:24

标签: android jquery html ios css

我正在开发一个拥有自定义灯箱的网站。当用户激活灯箱时,活动灯箱后面会有一个灰色的半透明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; }

以下是桌面上的内容:

  

enter image description here

以下是平板电脑的外观:

  

enter image description here

注意明亮的黄色条子。

提供灰色的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因为问题的性质无法提供帮助。忍受我。

1 个答案:

答案 0 :(得分:0)

事后似乎很明显,也许有一个更优雅的解决方案,但最终这就是我提出的:

@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上测试了它,并在browserstack上测试了一些Android设备,它似乎运行得很好。