実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/15 06:42
2021/05/15 06:59
2021/05/15 07:19
2021/05/15 07:36
2021/05/15 14:59