jquery - 检测哪个视图在移动设备上处于活动状态

Question

我需要知道其手机或 Pad 上的用户是否正在查看网站 Verticaly 或 Horizo​​ntaly 以切换我的图像比例。

例子：

如果用户正在水平查看页面，我的图像的样式以查看它的全尺寸将是

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

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

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

那么我怎样才能在 jQuery 或 Javascript 或媒体查询中实现这样的事情......等等，这样我就可以根据用户在其移动设备或 iPad 上查看页面的视图来采取良好的风格？

谢谢

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/

Answer 2

你不能只使用带有某些断点的响应式 css 吗？

有点像这样：

@media screen and (max-width: 123px /* your value */ ) {
  img{width:auto; height:100%;}
}