Targeting Windows 8 Snap Mode

Updated 17th October 2013 (Windows 8.1, IE11), by Edward Cant.

Presenting a JavaScript method to allow CSS targeted for Windows 8 snap mode.

Question: can you target IE snap mode using CSS? To add different styles to snap mode on IE only..
— Luke Wroblewski (@lukew) June 3, 2013

The above tweet sparked the following ideas, with Luke encouraging the development of a test case.

The Theory

Windows 8 features full screen apps with overlayed menus. IE is no exception.

The presented detection technique targets the design,

Snap mode requires a screen width >= 1024px (previously 1366px).
A snapped viewport occupies the full screen height (in IE10).
Snapped viewports occupy a little less than screen height in IE11 due to a new 15px bottom toolbar.
Viewport width is a minimum of 320px and less than screen width.
The window is locked to the top of the screen.

Aspect ratio checks were also considered since the vast majority of Windows 8 tablets are 16:9. However, snap mode is possible on desktop screens and upcoming tablet variations meant this had to be ruled out.

Remember, to enable device-width viewports in snap mode you can use the @viewport declaration.

Pure CSS Method. Not Quite Possible.

Windows 8 snapped mode used to be fixed at 320px, with the corresponding ‘filled’ mode starting at 1024px. The fixed widths, combined with a minimum landscape resolution of 1366px made rough detection possible via CSS Media Queries.

@media (width: 320px) and (min-height: 768px) and (min-device-width: 1366px) { }
@media (width: 1024px) and (min-height: 768px) and (min-device-width: 1366px) { }

The CSS method had downsides. A desktop browser resized to exactly 320 or 1024px width could give a false positive on a large screen and ‘filled’ modes could be wider on large screens.

Snap mode restrictions have changed with Windows 8.1. While not completely flexible, further snap points are available.

1024 x 768px has been announced as a new lower minimum resolution to potentially allow smaller Windows tablets. These tablets feature a half screen snap (video), despite being initially announced as not allowing this functionality.

The continued use of Media Queries for snap mode detection would be difficult to maintain across desktop and tablet resolutions. As a result, a CSS method in this form is unworkable.

The JavaScript Approach

// Snap mode detection
//---------------------
var snapDetect = function() {
	var bClass = false, bodyClass,
		d = document, dE = d.documentElement,
		vHeight = dE.clientHeight, vWidth = dE.clientWidth,
		scrHeight = screen.height, scrWidth = screen.width,
		snapSpaced = ' snap ';

	if(scrWidth < 1024 || !String.prototype.trim || window.screenY !== 0) return false;

	bodyClass = ' ' + d.body.className + ' ';
	if(bodyClass.indexOf(snapSpaced) > -1) bClass = true;

	if(vWidth >= 320 && vWidth < scrWidth && vHeight >= 720 && (vHeight === scrHeight || vHeight === (scrHeight - 15))) {
		if(!bClass) d.body.className += ' snap';
		return true;

	}

	if(bClass) {
		bodyClass = bodyClass.replace(snapSpaced, ' ');
		d.body.className = bodyClass.trim();

	}

	return false;

};

snapDetect();
window.addEventListener('resize', snapDetect, false);

A convenience body class of 'snap' is present on detection of snap mode.

If JavaScript is disabled then detection will not be available. Standard responsive design practices apply.

CSS Enhancement

Media Queries can be used to further isolate snap widths.


@media (max-width: 320px) {
	.snap { }

}

Alternate Browsers

Browsers like Google Chrome support Windows 8 mode. However, it seems only IE has elected to offer an almost full screen height viewport via overlayed toolbars.

Should other browsers offer this, the described snap mode detection method will apply. Until then, it's an easy way of identifying an IE snapped view.

False Positives

I have tried to ensure that the test takes into account as many edge cases as possible. Please let me know if you find any false positives!

Comments

Comments, suggestions or feedback via Edward Cant on Twitter please.

Follow the author on Twitter.

ProtoFluid. ‘Effortless responsive web design testing’.

Canvas Generated Icons. Read more.

Targeting Windows 8 Snap Mode. Read more.

CSS @viewport rule or viewport meta tag? Read more.

The Responsive Viewport. Missing piece of the responsive web design puzzle? Read more.

Menacing Cloud