React, Material-UIでレスポンシブ対応したいが、PCの縮小版のように表示される

実現したいこと

ReactのMaterial-UIを利用しWebアプリケーションを作成しており、スマホ対応をしようとしています。
そこで、レスポンシブ対応をしようとしているのですが、ChromeのDeveloper Toolで見た時の表示がおかしくなる理由が分からずご教授いただけると嬉しいです。

前提

技術スタック
Ruby on Rails
TypeScripot
Material-UI
React

発生している問題・エラーメッセージ

以下の画像のように、Chromeのディベロッパーツールを用いてスマホサイズを指定した際に、PCの縮小版のように表示されます。スマホ実機で見た際もこのような表示になります。

一方、スマホサイズ指定ではなく、だんだんと幅を狭くしていくと以下のように表示されます。こちらは、本来理想の表示のされ方だと思うのですが、実機ではこのように表示されません。

Material-UIの公式サイトのPersistent drawerとほぼ同じようにApp Barを書いており、公式サイトではスマホサイズにしたときに、適切な理想形で表示されるのですが、私のAppでは表示されず、その違いが何なのかわかりません。
公式サイトの、Persistent drawerのコードでもスマホ対応しているようなコードは見当たりません。

以下公式サイトでのスマホ表示

該当のソースコード

ThemeTemplate.tsx

TypeScript
1import * as React from "react"
2省略
3
4const theme = createMuiTheme({
5  省略
6})
7
8type Props = {
9  children: React.ReactNode
10}
11
12const ThemeTemplate: React.FC<Props> = ({ children }: Props) => {
13  return (
14    <ThemeProvider theme={theme}>
15      <CssBaseline />
16      {children}
17    </ThemeProvider>
18  )
19}
20
21export default ThemeTemplate
22

Viewファイルのreturnの中身

TypeScript
1return (
2    <ThemeTemplate>
3      <div className={classes.bar}>
4        <AppBarComponent isSignedIn={props.isSignedIn}/>
5        <main className={classes.content}>
6          <div className={classes.toolbar}/>
7          <Container>
8            <Box mb={2}>
9              <Box>
10                <Box mb={2}>
11                  <Typography component="h2" variant="h4">
12                    売り上げ
13                  </Typography>
14                </Box>
15                <Paper className={classes.tablePaper}>
16                 省略
17                </Paper>
18              </Box>

試したこと

公式サイトと同じ書き方をしているのに、AppBarまで縮小されて表示される原因は、大元であるThemeTemplateにあるのではないかと考えているのですが、糸口が見えず。。

React初心者で稚拙な質問で恐縮ですが、ご教授いただけますと幸いです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

viewport が設定されていないのではないですか？

メディアクエリは<head>内にviewportの記述がないと動いてくれません。

cssでMedia Queries(@media)が効かないときに確認すること - サウウェブ

投稿2021/05/10 03:11

Lhankor_Mhy

総合スコア36074

Romay

2021/05/15 06:42

ありがとうございます。application.html.erbの<head>内に<meta name="viewport" content="width=device-width,initial-scale=1">を追加することで、この問題は解決できました。一方、本アプリケーションはスマホでのみ利用されるユーザー側画面が管理画面と別にあり、そちらにもviewportが適用されてしまうことでCSSが崩れてしまいました。 1つのRails×Reactアプリケーション内でViewportを一部のビュー(ここでいう管理画面側)のみに適用させることはできるのでしょうか。

Lhankor_Mhy

2021/05/15 06:59

状況がわかりかねますが、以下のどちらかになると思います。 1. スマホでのみ利用されるユーザー側画面もviewport設定に合わせてデザインし直す 2. ビューによってメタタグの出力をコントロールするスマホでのみ利用されるユーザー側画面がviewportを設定すると崩れるということは、スマホでのみ利用されるユーザー側画面が縮小されているなどの現象が起きていたはずですので、私なら1を選択します。

Romay

2021/05/15 07:19

早速ありがとうございます。　2の選択肢(出し分ける)を取ることもできるとのこと大変参考になりました。(できないと思っておりましたので) 中長期的には1の選択肢を取りデザインし直すのが正しいと思いますが、直近スピード重視で、ユーザー側のデザインも大幅に崩れてしまっていたため、今回は2の選択肢でユーザー側画面に影響を与えない形で管理画面側にviewportを設定したいと思います。他の観点での懸念等ありましたらご教授いただけると大変嬉しいです。

Lhankor_Mhy

2021/05/15 07:36

turbolinks などの pjax ですと、viewport を使い分けるのは難しいのかもしれません。すみませんが、当方はCSSなどをメインに回答しているもので、Rubyは全くわからないので、改めてご質問を立てることをお勧めします。

Romay

2021/05/15 14:59

承知しました。ベストアンサーにさせていただき本質問は閉じたいと思います。ご丁寧にお教えいただきありがとうございました。

行動規範の内容に同意します