スマートフォン縦横向き変更時の文字サイズを自動調整する機能を無効化
- 2016.10.24
- 回転
■文字サイズを自動調整する機能を無効化 body { -webkit-text-size-adjust: 100%; }
Android/iPhone
position:fixedした要素がスクロール中だけz-indexを無視される
- 2016.10.24
- iOS, position:fixed, スクロース, バグ
下に隠れてしまうdiv要素に以下のcssを指定することで解消される。 .content { -webkit-transform: translate3d(0,0,0); }
スマートフォンをを回転させた際に、absluteしている配置がずれる（縦横変更）
width:100%、absoluteしたinnerを挟む。 <div class="content"> <div class="inner"> <p class="hoge">width:100%、absoluteしたinnerを挟む</p> <p class="fuga">fuga</p> </div> < […]
【まとめ】Androidデフォルトブラウザで引っかかったバグっぽい端末のなにか
◯背景が出ない Android標準ブラウザがbackground短縮プロパティでbackground-sizeを初期化してくれない。 →対策：background-sizeも別途記載すると。 例）background-size: auto; ◯text-indentを含む構成での表示崩れ 他ブラウザでは表示されないtext-indent: -9999px;などの値をそのまま表示する 結果中身が消 […]
【まとめ】iPhoneで引っかかったバグっぽい端末のなにか
◯fixedで要素を固定＋z-indexで重なりを設定 iPhoneでスクロールしている間だけz-indexが効かなくなる。（指を離すタイミングで正しい優先度になる） →対策： 下に隠れる要素に-webkit-transform: translate3d(0,0,0); を設定 ◯ワンクリックでリンクを飛ばない 新し目のiPhoneでクリックの挙動が変わっているぽ。hoverをワンアクションと認識 […]