Question

我需要知道手机或手机上的用户是在查看网站Verticaly还是Horizontaly来切换我的图像比例。

示例：

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

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%;}
}

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

2 个答案: