在不适合移动设备的页面上创建适合移动设备的小部件

Question

快速背景：

我正在尝试制作适合移动设备的小部件。我的客户有不适合移动设备的页面，而且这不太可能很快改变。

尝试的解决方案：

我认为这不会太糟糕。只需使用 position:fixed 从页面流中删除小部件，插入视口元标记，然后就可以了！ ...正确的？ See this here fiddle.

问题：

尝试的解决方案在某些移动设备上失败。当使用同事的 phone 时，他们能够从所谓的 position:fixed 元素滚动离开！（有问题的 Phone 是 Android 4 或 5，所以它不是 2.1-2.3 错误。）我很确定在 iPhones.

从本质上讲，它似乎表现得好像 position:absolute 在页面的左上角。

尝试的解决方案详细信息：

我首先在视口元标记中附加 javascript:

$('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');

在我的 phone 的（Galaxy ~~平板电脑~~ 注意）默认浏览器上，效果很好！没问题！如前所述，在 iPhones、有问题的 Android 设备等上，您可以滚动离开 position:fixed 元素，就好像它实际上是 position: absolute 一样。如何让 position:fixed 工作？

Answer 1

解决方案比我想象的要简单一些。使用 javascript，我已经将我的 hide-overflow class 附加到正文和第一个 div 元素。 class 看起来像这样：

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

就是这样！只需在小部件显示时将此 class 添加到 <body> 标签，并在小部件隐藏时将其删除。

Here's the working fiddle.

在不适合移动设备的页面上创建适合移动设备的小部件

Creating a mobile-friendly widget on a non-mobile-friendly page

html

javascript

css

mobile

jquery

快速背景：

尝试的解决方案：

问题：

尝试的解决方案详细信息：