Changeset 26070

Timestamp:

11/09/2013 11:19:35 PM (12 years ago)

Author:

lancewillett

Message:

Bundled Themes: implement Microsoft-specific @viewport rules for better responsive styling in Windows 8 "snapped" views. Props celloexpressions, fixes #25888.

Location:

trunk/src/wp-content/themes

Files:

• twentyeleven/style.css (modified) (1 diff)
• twentythirteen/style.css (modified) (1 diff)
• twentytwelve/style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentyeleven/style.css

@@ -2284 +2284 @@
 ----------------------------------------------- */
 
+/* Does the same thing as <meta name="viewport" content="width=device-width">,
+ * but in the future W3C standard way. -ms- prefix is required for IE10+ to 
+ * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor 
+ * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
+ */
+@-ms-viewport {
+    width: device-width;
+}
+@viewport {
+    width: device-width;
+}
+
 @media (max-width: 800px) {
     /* Simplify the basic layout */

trunk/src/wp-content/themes/twentythirteen/style.css

@@ -2578 +2578 @@
  */
 
+/* Does the same thing as <meta name="viewport" content="width=device-width">,
+ * but in the future W3C standard way. -ms- prefix is required for IE10+ to 
+ * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor 
+ * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
+ */
+@-ms-viewport {
+    width: device-width;
+}
+@viewport {
+    width: device-width;
+}
+
 @media (max-width: 1599px) {
     .site {

trunk/src/wp-content/themes/twentytwelve/style.css

@@ -1433 +1433 @@
 -------------------------------------------------------------- */
 
+/* Does the same thing as <meta name="viewport" content="width=device-width">,
+ * but in the future W3C standard way. -ms- prefix is required for IE10+ to 
+ * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor 
+ * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
+ */
+@-ms-viewport {
+    width: device-width;
+}
+@viewport {
+    width: device-width;
+}
+
 /* Minimum width of 600 pixels. */
 @media screen and (min-width: 600px) {