如何模拟orientationchange得到css数据？

Question

我有以下两个媒体查询

@media screen and (orientation : portrait) {
   .rect {width:100px;}
}

@media screen and (orientation : landscape) {
   .rect {width:200px;}
}

当我启动 index.php 时，我需要立即获取两个变量，例如

var rect_portrait = width //  when orientation is portrait (100 px)
var rect_landscape = width //  when orientation is landscape (200 px)

如何实现？提前谢谢你

Answer 1

给你！

landscape_height = $(window).innerHeight();
landscape_width  = $(window).innerWidth();

现在您可以通过以下方式决定纵向与纵向：

if(landscape_height < landscape_width){
    console.log('landscape');
    //do something
}else if(landscape_height > landscape_width){
    console.log('portrait');
    //do somethihng
}

现在来模拟反转检测横向与纵向的条件逻辑

如何模拟orientationchange得到css数据？

How to simulate orientationchange to get css data?

jquery

media-queries