Responsive Design in Web Parts

Question

How can one use a grid like this https://www.npmjs.com/package/react-material-responsive-grid so it's displayed on mobile phone properly without the Desktop View on any Mobile phone browser(Safari,Chrome,Firefox etc)?

I am creating web parts and they work fine in desktop browsers and even in the local Workbench on laptops or computers and even it's Mobile/Tablet previews option. However when my Web Parts are deployed to a site page and are viewed on a physical mobile phone,whether Samsungs or iPhones the mobile view comes up and grid is not displayed.

IT DOES work however when using the Request Desktop version option but is there any way/work around for this?

The NPM library I am using is amazing and is saving lots of CSS/Bootstrap and custom table work but I believe I am using the wrong settings from Properties available - e.g. xs4, md={2} etc. From reading this https://docs.microsoft.com/en-us/sharepoint/dev/design/grid-and-responsive-design I believe I need 1 columns max on devices up to 7 inches. My current test devices are Samsung Galaxy S7 edge SM-G935F and the iPhone 6.

I see in the process I am learning that Responsive Design is huge and am open to learn new stuff! ;-)

The stack I am using is: SP Online 2016 ReactJS JSX NPM

Answer 1

As SharePoint automatically changes THE REDIRECT BEHAVIOR OF A MOBILE BROWSER pr we can say changes the URL of the requested nonmobile page to its mobile substitute.

• And disabling the feature is one way for Online SharePoint and
• OnPremises you can modifiy the compat.browser file in IIS under App_Browsers folder

• And you configure or CREATE A DEVICE CHANEL for different diveces.

  Here is the reference