我正在开发一个具有自定义灯箱的网站。当用户激活灯箱时, Activity 灯箱后面会出现一个灰色半透明的 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 设备上的 browserstack 上对其进行了测试,它似乎运行良好。
关于android - 在平板设备上填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22028364/