快速背景:
我正在尝试制作适合移动设备的小部件。我的客户有不适合移动设备的页面，而且这不太可能很快改变。
尝试的解决方案:
我认为这不会太糟糕。只需使用 position:fixed 从页面流中删除小部件即可，插入一个视口(viewport)元标记，然后转瞬即逝! ...正确的？
See this here fiddle.
问题:
尝试的解决方案在某些移动设备上失败。在使用同事的电话时，他们能够远离 所谓的position:fixed。元素! (有问题的手机是 Android 4 或 5，所以它不是 2.1-2.3 错误。)我很确定 iPhone 上也会出现同样的行为。
从本质上讲，它的行为似乎是 position:absolute在页面的左上角。
尝试的解决方案详细信息:
我首先使用 javascript 附加视口(viewport)元标记:
$('head').append('<meta name="viewport" content="width=device-width,initial-scale=1"/>');
让我们假设一个非常基本的 HTML 模板:
<html>
...
<div class="overlay">
<div class="modal">
<div class="content">...</div>
</div>
</div>
...
</html>
和以下 CSS:
.hide-overflow {
overflow: hidden;
}
.overlay {
position: fixed;
-webkit-backface-visibility:hidden; /* Not that this does anything */
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table;
overflow: hidden;
z-index: 1000;
}
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
width: 800px;
height: 500px;
}
@media (max-width: 800px) {
.overlay * {
max-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
当然，我认为这还不够。我还添加了以下 javascript 以防止在 <body> 上滚动和最外面的<div>元素:
// This only shows up when the widget is activated--it's removed on deactivation.
$('body').addClass('hide-overflow');// Just adds overflow:hidden, in case you forgot ;)
$('body > div').addClass('hide-overflow');
在我的手机(Galaxy 平板电脑 Note)默认浏览器上，这很好用!没问题!如前所述，在 iPhone、有问题的 Android 设备等上，您可以滚动离开 position:fixed。元素就好像它实际上是 position: absolute .我如何获得 position:fixed上类？
最佳答案
解决方案比我想象的要简单一些。使用 javascript，我已经附加了我的 hide-overflow类到正文和第一个 div 元素。那个类看起来像这样:
.hide-overflow {
overflow: hidden;
}
解决我的问题的方法是将其更改为以下内容:
.hide-overflow {
overflow: hidden;
width: 100% !important;
height: 100% !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
就是这样!只需将此类添加到 <body>在小部件显示时标记，在小部件隐藏时将其删除。
关于javascript - 在不适合移动设备的页面上创建适合移动设备的小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29129930/