iPhoneで画面が左右にぐらぐらする場合のCSSによる対処
iPhone で HTML ページを見る場合、画面が左右にぐらぐらと揺れてしまう場合があります。
ユーザの操作性が非常に悪く普通は離脱してしまうでしょう。それを防ぐためのCSSなどの書き方を紹介します。
最小サイズ、最大サイズを共に1.0に設定します。またユーザが拡張できなくします。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
画像サイズを100%と画面幅に合わせます。
<style type="text/css">
img{
max-width:100%;
height:auto;
}
</style>
テーブルを使用する場合の対処です。
.table_container {
overflow-x: auto;
}
.table_container::-webkit-scrollbar {
height: 10px;
}
<div class ="table_container">
<table>
</table>
</div>
HTMLで溢れた部分は隠します。
html {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
body {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
キーワード：CSS
Windows トラブルシューティング一覧に戻る
（ご注意事項)本ページは2017年に独自に調査して記載した事項です。本ページには誤りがある可能性はあります。また今後仕様が変更となる可能性があります。
本ページにより発生したいかなる損失も誰も補償しません。あくまでも自己責任で参考にしてください。