質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

6677閲覧

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

Romay

総合スコア40

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/05/09 09:57

実現したいこと

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

前提

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

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

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

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/ツールのバージョンなど)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

投稿2021/05/10 03:11

Lhankor_Mhy

総合スコア35740

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問