Creating a responsive mobile master page_SharePoint 2013 WCM Advanced Cookbook-QQ阅读中文武侠网

上QQ阅读APP看书，第一时间看更新

Creating a responsive mobile master page

In this recipe, we will modify the seattle.master master page to hide the header controls and float all of the page elements to make them appear vertically stacked. This will allow users to view the site on mobile devices and only require the user to scroll vertically rather than both vertically and horizontally.

This recipe will only cover the basic aspects of making a responsive design master page friendlier to mobile devices. Additional styling and design would be required to provide a more complete mobile user experience.

Responsive designs are usually flexible, allowing pages to render well in various web browsers and are not limited to mobile browsers. Creating responsive designs is a good practice for all web browsers. In this recipe, however, we will focus on a responsive design geared at mobile browsers.

Getting ready

For this recipe, we should have a device channel created to target our mobile browsers.

How to do it...

Follow these steps to create a responsive mobile master page:

Open SharePoint Designer.
Select Open Site. Enter the complete URL to the SharePoint site and select Open.
From the Navigation pane, select Master Pages.
In the list of files in the Master Pages library, make a copy of seattle.master (for our example, we have renamed it Seattle_Responsive.master).
Check out the new Seattle_Responsive.master master page.
Open the Seattle_Responsive.master master page.
Locate the <head> element.

Add the following CSS reference to the Responsive.css file that we created:

<SharePoint:CssRegistration ID="customCssRegistration" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/Responsive.css %>" runat="server"></SharePoint:CssRegistration>

Save the master page.
Check in and publish the master page using the Check In and Publish options.
Set the master page as the Site Master Page or assign the master page to the device channel that targets your mobile device.
From the Navigation pane, select All Files.
In the All Files content pane, navigate to _catalogs | masterpage | resources.
From the New section on the ribbon, navigate to File | CSS.
Name the new CSS file Responsive.css.
Check out the new Responsive.css file.
Open the Responsive.css file.
Hide the header controls using the following code:
```
#suiteBar, #s4-ribbonrow {
display: none;
}
```
Set the title area to have an automatic width using the following code:
```
#titleAreaRow, #s4-titlerow {
height: auto;
width: auto;
}
```

Set the content of the title and content areas to float using the following code:

#titleAreaRow > div, #contentRow > div, #layoutsTable td {
float: left;
display: inline-block;
}

Set the page content to have a minimum width and set its left-hand side margin to override the default margin using the following code:
```
#contentBox {
min-width: 100px;
margin-left: 20px;
}
```
Set the workspace container to have a forced automatic width using the following code:
```
#s4-workspace {
width: auto !important;
}
```
Save the CSS file.
Check in and publish the CSS file using the Check In and Publish options.
Navigate to the site in your preferred web browser or your mobile device to observe the results. The results will be similar to the following screenshot:

How it works...

In this recipe, we have used CSS to hide controls and to make the remaining controls float and use automatic widths. By making these controls float and use automatic widths, we are making them appear stacked vertically to provide smaller screens with better visibility of the content. The content on the screen will be adjusted based on the width of the screen and so on.