jquery - 检测哪个 View 在移动设备上处于事件状态

Question

我需要知道用户在其手机或 Pad 上是垂直还是水平查看网站以切换我的图像比例。

例子:

如果用户水平查看页面，我的图片样式将是全尺寸

img{width:100%; height:auto;}

但如果它是垂直的，则需要将 css 切换为

img{width:auto; height:100%;}

那么我如何才能在 jQuery 或 Javascript 或媒体查询等中实现类似的东西，这样我就可以根据用户在移动设备或 iPad 上查看页面的 View 来采用好的风格？

谢谢

Answer 1

您可以使用一些 javascript 检测方向，例如:

detectOrientation();
    window.onorientationchange = detectOrientation;
    function detectOrientation(){
        if(typeof window.onorientationchange != 'undefined'){
            if ( orientation == 0 ) {
                 //Do Something In Portrait Mode
            }
            else if ( orientation == 90 ) {
                 //Do Something In Landscape Mode
            }
            else if ( orientation == -90 ) {
                 //Do Something In Landscape Mode
            }
            else if ( orientation == 180 ) {
                 //Do Something In Landscape Mode
            }
        }
    }

来自 http://www.devinrolsen.com/javascript-mobile-orientation-detection/