CODEWITHSUNDEEP
reactjsresponsive
Aaron Shen
Aaron Shen

Reputation: 8374

react material ui not responsive when opened in mobile browser

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?

enter image description here

Upvotes: 22

Views: 17384

Answers (4)

Stephen Melben Corral
Stephen Melben Corral

Reputation: 319

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

Steps:

  1. 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/

  2. 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 >
    );
}

Upvotes: 1

ru4ert
ru4ert

Reputation: 1179

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

Upvotes: 6

Lane
Lane

Reputation: 4996

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>

Upvotes: 2

kadzielawa konrad
kadzielawa konrad

Reputation: 463

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.

Upvotes: 34

Related Questions