在不適合移動設備的頁面上創建適合移動設備的小部件

Question

快速背景：

我正在嘗試制作適合移動設備的小部件。 我的客戶有不適合移動設備瀏覽的頁面，而且這種情況不太可能很快改變。

嘗試的解決方案：

我認為這不會太糟。 只需使用position:fixed從頁面流中刪除小部件，插入一個視口元標記，然后保存！ ...對？ 看到這里擺弄。

問題：

嘗試解決的方法在某些移動設備上中斷。 當使用同事的電話，他們能夠從所謂滾動遠 position:fixed元素！ （有問題的手機是Android 4或5，所以它不是2.1-2.3的錯誤。）我很確定在iPhone上也會發生這種現象。

本質上，它似乎表現得好像是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');

在我的手機（Galaxy ~~Tablet~~ Note）的默認瀏覽器上，這個效果很好！ 沒問題！ 如前所述，在iPhone，可疑的Android設備等上，您可以滾動到position:fixed元素，就好像它實際上是position: absolute 。 我如何獲得position:fixed工作？

Answer 1

解決方案比我想象的要簡單。 使用javascript，我已經將我的hide-overflow類附加到body和第一個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>標記中，然后在隱藏小部件時將其刪除即可。

這是工作中的小提琴。

在不適合移動設備的頁面上創建適合移動設備的小部件

問題描述

快速背景：

嘗試的解決方案：

問題：

嘗試的解決方案詳細信息：

1 個解決方案

解決方案1
0 已采納 2015-03-19 18:10:38

在不適合移動設備的頁面上創建適合移動設備的小部件

問題描述

快速背景：

嘗試的解決方案：

問題：

嘗試的解決方案詳細信息：

1 個解決方案

解決方案1 0 已采納 2015-03-19 18:10:38

解決方案1
0 已采納 2015-03-19 18:10:38