aboutsummaryrefslogtreecommitdiff
path: root/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss
diff options
context:
space:
mode:
Diffstat (limited to 'templates/@theme-base/reusable-components/_design-system-viewport-fix.scss')
-rw-r--r--templates/@theme-base/reusable-components/_design-system-viewport-fix.scss33
1 files changed, 33 insertions, 0 deletions
diff --git a/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss b/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss
new file mode 100644
index 0000000..01a82ae
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss
@@ -0,0 +1,33 @@
+/* fix viewport for Win8 (snap mode) and preparing day
+ * when viewport will be supported by all render engines
+ *
+ * Examples: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
+ * width=device-width => width: device-width;
+ * height=device-height => height: device-height;
+ * initial-scale=2 => zoom: 2;
+ * maximum-scale=2 => max-zoom: 2;
+ * minimum-scale=0.5 => min-zoom: 0.5;
+ * user-scalable=no => user-zoom: fixed;
+ *
+ * for Win8 snap mode => only width: device-width; works for the moment
+ */
+
+
+/* if anyone has a mixin for this, feel free to share */
+
+
+@-webkit-viewport {
+ width: device-width;
+}
+@-moz-viewport {
+ width: device-width;
+}
+@-ms-viewport {
+ width: device-width;
+}
+@-o-viewport {
+ width: device-width;
+}
+@viewport {
+ width: device-width;
+}