react material ui not responsive when opened in mobile browser

Question

I'm trying to build a mobile web application using react material ui library.

But it seems the material UI components are not responsive. They display very well on desktop, but when I open it on my mobile browser, the fonts are very small.

Isn't material UI meant to be used to build mobile App? Why it's even not responsive?

I guess you didn't add `` in the `` section of your document. — pawel, Feb 23 '17 at 12:35
@pawel, thanks for pointing out. That's exactly the problem. — Aaron Shen, Feb 23 '17 at 12:43

score 34 · Accepted Answer · answered Jun 03 '18 at 07:50

You must add the directive in the section.

Add to your project in which you initiate the application:

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

The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.

A viewport element gives the browser's instructions on how to control the page's dimensions and scaling.

The width = device-width part sets the width of the page to the screen-width of the device.

The initial-scale = 1.0 part set the first zoom in the browser.

Just made my... uhm... night :D – Dmitry Arkhipenko May 05 '19 at 20:58 — Dmitry Arkhipenko, May 05 '19 at 20:58

score 6 · Answer 2 · answered Aug 10 '21 at 10:36

6

Material @4 and @5

you have a index.html file in your public folder. add this line at the beginning of your <head> tag.

    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

Reference

answered Aug 10 '21 at 10:36

ru4ert

998
2
14
25

score 2 · Answer 3 · answered May 25 '20 at 03:35

https://material-ui.com/customization/breakpoints/

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

Use the breakpoint like:

<Grid container>
  <Grid xs={12} md={6} lg={5} item>    
  </Grid>
  <Grid xs={12} md={6} lg={7} item>
  </Grid>
</Grid>

score 1 · Answer 4 · edited Sep 25 '21 at 09:21

Assuming that you did add the viewport, you can use breakpoint to make your webpage responsive as suggested by @Lane.

Steps:

Declare a variable. This returns true if the breakpoint is hit otherwise false.
```
const matches = useMediaQuery('(max-width:600px)');
```
Reference: https://mui.com/components/use-media-query/
Use the sx props to set the width using the variable from step 1 with ternary operator
```
<Paper sx={{ width: matches === false ? '40vw' : '80vw' }} />
```
Reference: https://mui.com/system/the-sx-prop/

Example:

const Component = () => {
    const matches = useMediaQuery('(max-width:600px)');

    return (
      <Box
         sx={{
           '& .MuiTextField-root': { **width: matches === false ? '35vw' : '70vw'** },
        }}
      >
         {/* ... */}
      </Box >
    );
}

react material ui not responsive when opened in mobile browser

4 Answers4

Material @4 and @5