【スマホで@mediaが効かない】CSSでレスポンシブ対応する時の注意点

スマホレスポンシブ対応 プログラミング




CSSでレスポンシブ対応

PSとSPで画面のデザインを変えたい場合、CSSで対応することはよくあると思います。

定番の対応法として、画面サイズ毎に適応するCSSを変えると思いますが、単純に切り替えただけだとうまくいかなかったので、忘備録も兼ねてまとめておきます。

この記事を読んで分かること

・スマホで@mediaを使って切り替えが、うまく反映されない時の対処法

不十分なパターン

こんな感じで画面サイズ毎に@mediaで適応するCSSを切り替えられます。という情報はよく出てきますが、これだけだとスマホで正しい挙動にならない場合があります。

@media screen and (max-width: 550px) {
/* 画面サイズが550pcまで 大体のスマホに対応 */
}

@media screen and (min-width:550px) {
/* 画面サイズ550px以上 大体のタブレットに対応 */
}

@media screen and (min-width: 1000px){
/* 画面サイズ1000px以上 大型タブレットや横画面に対応 */
}

スマホ画面サイズが正しく適用されていないことが原因で、正しく適用されてあげれば良いわけです。

解決策

<head>内にこれを入れたらうまくいきます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

metaでviewportの設定を入れてあげると、スマホでも正しい画面サイズが適応され、@mediaでCSSを切り替えられるようになります。

簡単なことですが、意外と書かれていないことが多いので、スマホでなぜかCSSの切り替えがうまくいかないという人は、試してみてください。

プログラミングを効率的に学ぶには、Udemyがオススメです。
Udemyは、世界最大の教育プラットフォームで、動画でスキルを学ぶことができます。

【セール95%OFF】オンライン学習ならUdemyがオススメ【プログラミング・ビジネススキル】
オンライン学習ならUdemyが一番オススメです。その理由を徹底解説します。プログラミングやビジネススキル、YouTube、ブログなど副業で稼ぎたい人もUdemyならオンラインで挫折せずスキルを身に付けられます。

Webサービス・スマホアプリ・ゲーム開発に役立つプログラミングスキルはもちろん、ブログやYouTubeで稼ぐために必要な集客・ブランディングなどを学ぶことができます。

セール期間中は、95%OFFになったり、30日間の全額返金保証もついているので、お得に安心して利用できます。





コメント

タイトルとURLをコピーしました