Article
7 comments

How to add viewport meta without editing the master page

If you like to create a responsive user experience it is common practice to add a <meta name=”viewport”> tag to the html. This tag contains instructions to the browser in the matter of viewpoints and zooming and make sure that your web design is scaled properly according to your style definitions. Without this tag SharePoint on an iPhone will look as seen on the screenshot below. Currently SharePoint doesn’t support it by default.

sharepoint-on-iphone-without-viewport

SharePoint on iPhone without viewport meta tag

Most people tend to add it directly in the master page. A modification that is yet supported but not recommended by Microsoft in Office 365. On publishing sites this meta tag can be added even without editing the master page.

SEO Options will help

When a publishing site collection has been created the “Search Engine Optimization Settings” are enabled by default on a site collection level.
The main purpose of these settings to add additional things to the header definition of SharePoint. To be more specific the meta tags that can be added will be used to verify you are the owner of a web site and will be used by tools, such as bing webmaster tools or google web master tool.

In fact those settings are not needed for Office 365 publishing intranet web sites. No webmaster tool will ever be able to access our well protected and authentication enabled intranets. Meta tags are meta tags, so why not reuse the Search Engine optimization settings to smuggle in the view port meta tag.

To do so navigate to Site Settings > Site Collection Administration and Search Engine Optimization.

Site Collection Administration > Search Engine Optimisation

Site Collection Administration > Search Engine Optimisation

The value for the viewport I added was:

A value that works perfectly across many devices. The result is a perfectly scaled SharePoint. Not optimized for responsiveness but it displays the content correctly according to the style definitions.

SharePoint on iPhone without viewport meta

SharePoint on iPhone with viewport meta tag

The only thing that is left to do is to add a style sheet that defines the media queries and the media break points.

Dev support for this property

In case you like to provision those properties via a SharePoint Hosted App or Provider Hosted App the following two properties needs to be set a the root of the site collection.

  • seoincludecustommetatagpropertyname
    This property defines that there are custom SEO Meta tags available. The possible values are “True” or “False”.
  • seocustommetatagpropertyname
    This property stores the value of the SEO Meta tags. In our case it contains:

If you like to provision just a responsive CSS file without editing the master page you can set this property from your SharePoint Hosted or Provider Hosted App.

Conclusion

Adding the viewport settings like this might not enable a full scaled branding project but it helps you at least to provide a better device independent user experience. To test run this the feature “Mobile Browser View” needs to be disable which is a web feature. With this small hack you can follow the Microsoft recommendation not to customize the master page in Office 365.

Office 365 Pattern and Practices

In the Office 365 Pattern and Practices recently a solution by Heather Solomon was added that should show how to make SharePoint Responsive without editing the master page. I already submitted a bug on this sample. The problem is that without a proper defined viewport there is no change to get this sample running. Even Heather Solonom introduced this in her great blog post “Make seattle.master responsive“. Finally, at the end she edited the seattle.html to add the viewport. Editing the HTML files in the master page gallery works the same way as editing the master page itself. Once the file have been approved a new seattle.master will be created and overwrites the current one.
The solution introduced here is the only way I found so far to make it running absolutely without editing any master page.

** UPDATE May, 3rd 2015 **
I added the code to set the viewport properties to the original code done by Vesa Juvonen. The Office 365 Pattern and Practices solution is now ready to test on hardware devices too. Without the view port setting the CSS works only on desktop browsers.

Recommended Links