今日スマホ実機で確認をした際に躓いたレイアウト、挙動面のエラーが
今後も起こりそうなので、備忘録を残します！
inputエリアをタップ→画面が勝手に拡大
-
原因
iOSではfont-sizeが16pxを基準値としているため
cssでfont-size15px以下を指定すると、画面が勝手に拡大する -
解決策
①font-sizeを16px以上に指定（意外と大きすぎない）
②metaタグのviewportにmaximum-scale=1.0を挿入する
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
</head>
※ダブルタップズームは別途制御が必要
- 解決策
-
htmlに
touch-action:manipulation
touch-actionには他にも色んなプロパティがあるようだけど
safariではautoとmanipulationしか使えないみたい。
manipulationは
ピンチでのズームはOK、ブラウザ仕様等で追加された
ダブルタップで自動ズームなどの挙動を制限するプロパティとのこと。 -
preventDefaultをつかってdblclickのアクションを消す
リセットに1の解決策を組み込んでいる人も多いみたいです。
overflowでのスクロールロックが効かない
モーダルなどを表示した時に裏背景のスクロールを止めたい時など。
-
原因
よくわかりませんでした。スマホ実機の独特の仕様が多いですね； -
解決策
①preventDefaultを使ってユーザーのスクロール挙動の前に操作を差し込む
（スマホならtouchmove、PCならwheel）
function handllingScroll(e) {
e.preventDefault();
}
function stopScroll() {
document.addEventListener("wheel", handllingScroll, { passive: false });
document.addEventListener("touchmove", handllingScroll, { passive: false });
}
解除は解除用の関数を作って、removeEventListner
ただ、この方法だと例えばモーダル内等にscroll要素があった場合も
含めて「全止め」なので、ちょっと不便。
②htmlにoverflow:auto;とheight:100%;の指定をし、
その上でbodyにoverflow:hidden;と同じくheight:100%;を指定。
（既定値のvisibleが邪魔をする..という事なのでしょうか。）
こちらの記事を参考にさせていただきました、ありがとうございます！
* iOSでbodyにoverflow: hiddenが効かないとき
バウンススクロールも解除したい場合
↓これ
さっきoverflow:auto;にしたhtmlをoverflow:hidden;にするだけ！
→これを起点のイベントに組み込む
overscroll-behaviorという要素も使えるんですが
あのsafariが非対応なので、あまり現実的でないかも；
最終的にこうなりました↓
html{
overflow: auto;
height:100%;
touch-action: manipulation;
overscroll-behavior: none;
position:relative;
}
html{
overflow: hidden;
height:100%;
touch-action: manipulation;
overscroll-behavior: none;
position:relative;
}
body{
overflow-y: hidden;
overscroll-behavior: none;
height:100%;
}
以上Qiita初記事、乱文失礼しました。