Nullppo

メモ帳的なにか

position fixedとviewportとiOSのメモ

メモなので詳しいことは書いてません!!!
あくまで色々試してみた結果を自分なりの解釈でまとめたもの。。。

詳しいことが分かったら追記するか、、、もしれない?

なにが起こったか。

とあるコンテンツを画面に固定したい要件の時に、

.sample {
    position: fixed;
}

と書きました。

コレが、iOS11で上手く行かなかったorz

どうやらviewportが原因でそうなってたっぽい?

viewportは画面より大きいwidthを指定されると画面からはみ出す。
画面より小さいwidthの場合、描画はviewportサイズで行いブラウザ側で拡大縮小して画面サイズまでもってく。
今回は、画面サイズより明らかに大きいwidthが設定されていました。
(viewportの設定が~~ってのは今回無しでw)

これを踏まえた上で、
iOS10では画面に固定されてる感じなのですが、
iOS11ではviewportに対して固定されてる感じ?
に思えました。

iOS11の方だけ絵を書いてみた。
※適当にペイントで書いたから見づらいかもorz
f:id:nullppo:20180406123759j:plain

詳しくは。。。。。

WEBで。