FacebookやTwitterのアプリ内ブラウザで画面高さが適切にとれない
今回は、TwitterやFacebookのアプリ内ブラウザ(embedded browser) に
フッターの固定メニューが正しく表示されない事態が発生したので、
その解消の経緯をメモ。
inappbrowserキライ。
結論
inappbrowserでは、
innerWidthなどは、URLやステータスバーなどの表示領域を含まれる、
ブラウザ全体の高さを取得してしまうのでNG。
レイアウトの観点では、画面最下部に寄せるなどの表示を
行うためには、position: fixedを用いるべし。
ベース資料
まず、いろいろぐぐって、これに行き着く。日本語記事はなかった。
html - Wrong viewport/page height in embedded Facebook browser in iOS 9.x - Stack Overflow
また、ちゃんと動いている例を探してみる。このあたりはちゃんと動いている。
* スマートフォンページのフッターに固定メニューを作成してみました
ということで、Core Layoutは、そのライブラリがベースなので使うのやめて、
フッター固定の記事に従ってみる。
最終的な適用内容
* bodyやhtmlなど、最も外枠になるdomをこの設定で、置く。
# 多分、この限りでない。
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
# bodyとhtml要素にも、position:fixedを一度設定したものの、position:fixedでは、
背景の高さがとれていなかったので、absoulteに寄せることに。
* body内の、背景画像をはめ込むための全面を満たすdomをこの設定で、置く。
position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;
# ここにbackgroundを、幅100%, 高さautoで指定すると背景の画像が適用される。
* 念のため、以下に記載の、ウィンドウサイズをhtmlのdomに書き添える処理を実施。
試行錯誤の過程
高さの指定の仕方を変更。
height:100%で指定するのでなく、以下の通りの指定に変更。
以下の通り、viewportの指定と合わせ技に。
<meta name="viewport" content="width=device-width, initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no, shrink-to-fit=no"/>
html, body, 任意のheight:100%の外枠のdom {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}=> だめ。
続いて、サンプルに全く習って、viewportをこう書いて
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>
このメソッドをangularのinit処理に書き足してみる。
function _fixViewportHeight() {
var html = document.querySelector('html');
function _onResize(event) {
html.style.height = window.innerHeight + 'px';
}
window.addEventListener('resize', _.debounce(_onResize, 125, {
leading: true,
maxWait: 250,
trailing: true
}));
_onResize();
}
_fixViewportHeight();
=> やっぱりだめ
vhとか、vwで幅・高さを指定してもだめ。
ここでposition:fixedに気づく
fixedを適用した結果、背景画像が表示されなくなる。（高さが0になる）
fixedを広く指定しすぎないよう、調整して、高さを保つようにする。
修正完了！
その他、過程で確認したこと。
viewportに、"shrink-to-fit=no"を追加。
=> これは、そもそも、iOS9?になって、一部で
スクロール中などに勝手に画面サイズへの最適化を図ろうと(?)
リサイズのような挙動が発生してカクつくことへの対応のための模様。
参考 :
html - Wrong viewport/page height in embedded Facebook browser in iOS 9.x - Stack Overflow
ios8.1 - Web page not getting 100% height in Twitter app on iOS 8 - Stack Overflow
html - iOS9 Safari viewport issues, meta not scaling properly? - Stack Overflow
ios 9 Safari / Web App Viewport Problem (expand... | Apple Developer Forums
