web-dev-qa-db-ja.com

Cordova WebViewに20pxの余分なスクロールがあるのはなぜですか？

私はCordovaアプリを構築しており、iOS 6デバイス（iPod Touch w/iOS 6.1.6）でテストしています。何らかの理由で、WebViewは追加の20pxでスクロール可能であり、画面上部の20pxステータスバーを補っているように見えます。これにより、スクロール可能なWebViewにフォーカスが移動することがあり、アプリでスクロール可能なdivsをスクロールさせるのではなく、基本的にユーザーの目には「何も」スクロールしません。 config.xmlの変更、プラグインなどに関連する多数の修正を試しましたが、何も違いはありません。これについては、以下で概説します。

  1. 試しました ステータスバーを手動で非表示にします 、効果なし。

    // config.xml:
<plugin name="org.Apache.cordova.statusbar" version="0.1.7" />

<feature name="StatusBar">
  <param name="ios-package" value="CDVStatusBar" />
</feature>

// index.js (ondeviceready):
window.StatusBar && window.StatusBar.hide();

  2. ステータスバーを強制的にWebビューにオーバーレイさせて、基本的にアプリの高さを460ピクセルではなく480ピクセルにしました。

    // config.xml:
<plugin name="org.Apache.cordova.statusbar" version="0.1.7" />

<preference name="StatusBarOverlaysWebView" value="true" />

  3. ステータスバーを強制的に notオーバーレイWebビュー にしようとしました：

    // config.xml:
<plugin name="org.Apache.cordova.statusbar" version="0.1.7" />

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

  4. ボディのマージントップを20pxオフセットしてみました。これにより、デッドホワイトスペースが20px余分に追加されます。

    // index.css:
body {
  margin-top: 20px;
}

  5. アプリを fullscreen に設定しようとしましたが、これは文字通りアプリにまったく影響しません。

    // config.xml:
<preference name="Fullscreen" value="true" />

  6. Safariインスペクターを使用してbody DOMノードを完全に削除しましたが、それでも20pxスクロールし、CordovaによるWebViewの実装ほどHTMLとは関係がないことを示しています。

誰かがこれに対する解決策を持っていますか？これに遭遇するのは私だけではありません。

ioscordovaios6scrollstatusbar
18
Matt Huggins

ほぼ8時間いじくり回した後、それを理解しました。これからmetaビューポート設定を置き換える必要がありました：

<meta name="viewport" content="user-scalable=no, initial-scale=1,
        maximum-scale=1, minimum-scale=1, width=device-width,
        height=device-height, target-densitydpi=device-dpi" />

これに：

<meta name="viewport" content="user-scalable=no, initial-scale=1,
        maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

のようだ height=device-heightは、ステータスバーを含むデバイスの高さ全体を考慮に入れていました。興味のある人のためにJavaScriptでこれを回避する方法を見ました。これは このStackOverflowの回答 でカバーされています。ただし、完全に削除しても問題はありません（iOS 6以降を対象とするCordovaアプリの場合）。

28
Matt Huggins

これをdevicereadyで試しましたか？

window.StatusBar.overlaysWebView(false);

https://github.com/Apache/cordova-plugin-statusbar/blob/master/doc/index.md

3
Red2678