iPhoneで画面が左右にぐらぐらする場合のCSSによる対処

作成日:2020/06/15
更新日:2020/06/15




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年に独自に調査して記載した事項です。本ページには誤りがある可能性はあります。また今後仕様が変更となる可能性があります。
本ページにより発生したいかなる損失も誰も補償しません。あくまでも自己責任で参考にしてください。