material-uiでGridのxs属性が効かずスマホ対応できない

material-uiではGridの属性でスマホ対応などが簡単にできる。

ブレークポイントの表

以下のようなブレークポイント（切り替えの値）で、スマホ対応ができる。
- xs, sm以下に適用
- sm, 600dp〜(一般的なスマートフォン)
- md, medium: 960dp〜（ipadなど)
- lg, large: 1280dp〜(一般的なノートパソコン)
- xl, xlarge: 1920dp〜(大きめのデスクトップパソコンなど)
参考:

Material-UIでGridレイアウトを試す - Qiita

例

例えばパソコンでは2:8:2、スマートフォンでは1:10:1にしたいときは

<Grid container>
  <Grid item xs = {1} lg ={2}>
    <Component1/>
  </Grid>
  <Grid item xs = {10} lg ={8}>
    <Component2/>
  </Grid>
  <Grid item xs = {1} lg ={2}>
    <Component3/>
  </Grid>
</Grid>

とすれば良いです。

xs属性が効かない！？？

上記のようにして、Chromeのdeveloperツールでスマホ対応ができているか確認しようとしたら あれ、変わらない？となりました。原因は、スマホのPCサイトをみやすくする機能でした。スマホはPCサイトを見やすくするために独自の画面サイズが定義されていて、スマホでサイトが表示されたときに、パソコンと同じ画面サイズのスタイルで表示されるようになっています。
本来の画面サイズで適用されるようには、metaタグのviewportを利用する必要があります。 htmlのheadのなかに以下の一文を記述

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

するとしっかりスマホ対応してくれました。めでたしめでたし。 参考:
【CSS】スマホで Media Queries が効かないときの対処法 - Qiita

最後に

最後までお読みいただきありがとうございました！ご意見、ご感想お待ちしています！
また、私heroku,rails,Reactで書かれているwebサイトを運営しています。
https://www.twi-reviews.jp/
今人気のゲームを、最新AI技術を用いた独自のシステムで評価しているサイトです。分析は、該当商品に関するツイートを集計し、評価・星付けをしています。
よかったらのぞいてみてください！