WP-Mix

A fresh mix of code snippets and tutorials

CSS Viewport Tricks

Note to self: you can specify various viewport properties such as initial-scale and user-zoom via <meta> tags or directly via CSS.

So we can specify viewport properties in the markup via <meta> tag:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

..or we can specify viewport properties in the stylesheet via the @viewport query:

@viewport {
	width: device-width;
	user-zoom: zoom;
	min-zoom: 1;
	zoom: 1;
}

And of course you’ll want to include a special query if supporting Microsoft’s Internet Explorer:

@-ms-viewport {
	width: device-width;
	user-zoom: zoom;
	min-zoom: 1;
	zoom: 1;
}

★ Pro Tip:

Digging Into WordPressGA Pro