I have been doing some work for a company who have a user base who primarily use iPads to access the SharePoint site. There was a requirement to allow those users to easily access the team site without getting their screens filled with the quick launch and the bloated title.

Initially, I solved this using by using JavaScript to set the page to full screen;

window.onload = function () {

    //alert('has loaded');
    SP.SOD.executeOrDelayUntilScriptLoaded(goToFullScreen, 'sp.js');
    // For use within normal web clients
    function goToFullScreen() {
    	//alert('goToFullScreen');
    	var isiPad = navigator.userAgent.indexOf('iPad') != -1;
    	if(isiPad) {
    		setTimeout(goFullScreen, 500);
    	}
    }

    function goFullScreen() {
    	SetFullScreenMode(true);
    }

    SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("sp.js");

};

The problem with this approach was the short delay from the page loading to the screen resizing to remove the side bar etc which was undesirable.

I was asked to find a better way to remove the menus that was more instantaneous so I turned to css media queries.

To achieve this, I looked at what the SharePoint SetFullScreenMode function actually did. I found that in addition to setting the cookie, it also applies the ms-fullscreenmode css class to the body element, which led me to the following CSS in the master page;

<style>

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){

		#navresizerVerticalBar{
			display:none;
		}
		#navresizerHorizontalBar{
			display:none;
		}
		#s4-titlerow {
			display:none !important;
		}
		#sideNavBox {
			display:none;
		}
		#contentBox {
			margin-left:40px;
		}
		#contentBox {
			margin-left:0px;
		}
	}
</style>
Are you confused about the ever growing number of services in AWS and Azure? Why not checkout these super useful glossaries that are always up to date!
There is one for AWS and one for Azure
Top

Share

Comments