react material ui not responsive when opened in mobile browser

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


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.