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:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

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:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

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

7 Comments

  1. Hi!

    Great post!
    I tried setting the viewport in SEO but the only thing that were affected was the suite bar.
    The content stayed the same even though I have CSS for media sizes eg. iPhone and so on.

    Any suggestions?

    Reply

    • Hi Andreas,
      the suite bar is currently made to be responsive by default 😉
      The problem you are might facing is that the content box (#contentbox) has a minimum width in the CSS. To remove this width you need to change it to min-width: auto or min-width: 0px.

      Otherwise you won’t be able to resize the content properly.

      /Stefan

      Reply

      • Stefan – I just wanted to stop in and say thanks. After standing up the new Responsive UI Package for SharePoint Online, I was having this exact issue where the suite-bar was responsive but the content was spilling over when viewing on tablets. I appreciate the blog and congrats on the MS MVP recognition!

        Reply

  2. Hi Stefan, cool post. For some reason the navbar isn’t responsive for our SPA built in Sharepoint Online. I could narrow it down by using Chrome to dev-tools, that the problem was no viewport meta tag. Adding it makes everything work as it should.

    Searching for this, I found your blog post. However, there is no Search Engine Optimization Settings in the page. Any idea how to enable it, if it even is possible? I mean, I could always inject the tag with javascript but that seems… wrong.

    Reply

    • The problem might be that you only use a team site or similar. The SEO Options will be available after you turned on “Publishing Infrastructure” Feature. I think this is the only one you need.
      Otherwise on team sites you have to inject the meta tag via JavaScript. I know it is a bit odd but sadly there is no other option than that.

      /Stefan

      Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.