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.