web-dev-qa-db-ja.com

ビューポートの下部をタップしたときにMobile Safariがツールバーを表示しないようにする

IOSのMobile Safari（MS）で実行するシンプルなモバイルアプリがあります。ユーザーがページを下にスクロールするとnピクセル、「上」ボタンが下から上にスライドします。上部のボタンは固定位置です。問題は、MSでスクロールを開始すると、ナビゲーションとツールバーのUIが非表示になることです。 「上部」ボタンをタップすると、下部のツールバーが表示され、「上部」ボタンをタップするには2回目のタップが必要です。デフォルトの「ビューポートの下部をタップしてツールバーを表示する」動作を無効にして、上部ボタンが期待どおりに動作するようにする方法はありますか（つまり、2回ではなくワンクリックでページの上部にジャンプしますか？

iosiphonemobile-safari
33
typeoneerror

いいえ、ありません。 Webページのコンテンツを制御できますが、サファリアプリの動作は制御できません。

15
Mika

ここでの簡単な解決策は、一番下のdivに約50ピクセルのpadding-bottomを追加することです。 Safariは、下の領域よりも上をクリックしない限り、下のナビゲーションバーにアクセスしようとしていると考えているようです。下部に余分なパディングがあると、ユーザーはページ上でずっと高い位置にクリックします（常にではありませんが、一般的に）。

6
Rowan Gontier

IOS 7.1の場合、ヘッダーでこれを設定してUIを最小化できます。

<meta name="viewport" content="width=device-width, minimal-ui">

IOS 7.1ベータ2で導入されました。このサイトは、minimal-uiがどのように機能するかを理解するのに役立ちました。 http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui -バグ

6
Mr. T

Mikaとtypeoneerrorは正しいですが、回避策があります。

私が見つけた最良の回避策（それはminimal-ui）は、iOS Safariの下部ナビゲーションを常に開いたままにしておくことです。この方法では、ウィンドウの下部をクリックすると、always開いているため、下部ナビゲーションが開かれません。

そのためには、CSSとブラウザーのターゲット設定をJSで適用するだけです。方法の詳細な手順：

5
jennz0r

これは私がこれをどのように扱っているかです。自分のposition:fixed;bottom:0ツールバーを使用して、サファリツールバーが非表示になった直後に（半透明のバッファーゾーンを使用して）44pxのオフセットを追加しています（これは、下部のタップが表示されるシナリオです）もう一度ツールバー）。

var min_inner_height = false;
var max_inner_height = false;

var passiveIfSupported = false;
try {
    window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: 
function() { passiveIfSupported = { passive: true }; } }));
} catch(err) {}


document.addEventListener('scroll', function(e) {
    var win_inner_h = window.innerHeight;
    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
        if (min_inner_height === false || win_inner_h < min_inner_height) {
            min_inner_height = win_inner_h;
        }
        if ((max_inner_height === false || win_inner_h > max_inner_height) && win_inner_h > min_inner_height) {
            max_inner_height = win_inner_h;
        }
        if (max_inner_height !== false && max_inner_height == win_inner_h) {
            addElementClass(document.body, 'safari-toolbars-hidden');
        } else {
            removeElementClass(document.body, 'safari-toolbars-hidden');
        }
    }
}, passiveIfSupported);

これは基本的に、ユーザーがページを下にスクロールしたために消えるときに、.safari-toolbars-hiddenクラスを<body>に追加します。この時点で、自分のツールバーをページの上に移動します。

.my-bottom-toolbar { position: fixed; bottom: 0px; }

@supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    .my-bottom-toolbar { transition: bottom 0.15s ease-in-out; box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8); }
    .safari-toolbars-hidden .my-bottom-toolbar { bottom: 44px;  }
}

これが誰かを助けることを願っています！さらに44pxオフセットする代わりに、場合によっては44pxの下部パディングを追加することもできます。

2
EoghanM