To create a responsive user experience for sites using default Seattle and Oslo master pages, you'll need to add add a <meta name=”viewport”> tag to the html, and use an alternate CSS to make our add-ins responsive.
The 'viewport' tag contains instructions to the browser in the matter of viewpoints and zooming, and ensures your web design is scaled properly according to your style definitions. Currently SharePoint doesn’t support it by default. You can add it directly to the master page, but on publishing sites this meta tag can be added without even editing the master page.
'Search Engine Optimization Settings' are enabled by default on a site collection level where publishing feature is activated (Publishing infrastructure in Site Collection features, Publishing in Site Features). The goal of these settings is to add additional things to the header definition of SharePoint, so it; possible to reuse the Search Engine optimization settings to add the 'viewport' meta tag. Navigate to Site Settings > Site Collection Administration > Search Engine Optimization, and add the following value to include into site pages:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Now we need to add a style sheet that will make our add-ins look responsive. To do that, navigate to Site Master Page Settings (/_layouts/15/ChangeSiteMasterPage.aspx) and specify an Alternate CSS URL which will point to https://**-lms.365.systems/Frontend/modules/responsive-masterpage/seattle_responsive.css:
NOTE: https://**-lms.365.systems stands for:
The result is our add-ins optimized for responsiveness: