Added basic detection for smartphones

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index c9c415a286b7b6b7d2987f6baba3043440ff5679..70594cc065a581bb294529cad62de275cf1fdd0c 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -134,6 +134,9 @@ String.prototype.hashCode = function() {
        
        jQuery.browser = browser;
        jQuery.browser.touch = (!!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator));
+       
+       // detect smartphones
+       jQuery.browser.smartphone = ($(html).css('caption-side') == 'bottom');
 })();
 
 /**

diff --git a/wcfsetup/install/files/style/global.less b/wcfsetup/install/files/style/global.less
index 4045a8ab515b246ab8e034b5f87ca40056521ad8..75ffe2a3034a72375a0e765564268a7e7b216266 100644 (file)
--- a/wcfsetup/install/files/style/global.less
+++ b/wcfsetup/install/files/style/global.less
@@ -400,6 +400,17 @@ a.badge:hover {
        }
 }
 
+/* the CSS below can be detected through JavaScript and works better than matchMedia-API (not supported by IE9) */
+@media only screen and (max-width: 800px) {
+       html {
+               caption-side: bottom;
+       }
+       
+       body {
+               caption-side: top;
+       }
+}
+
 @media only screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 2) {
        // Preserve HTML font-size when iPhone orientation changes from portrait to landscape
        html {