设备查询适配横屏

来源：互联网发布：linux如何安装vsftpd 编辑：程序博客网时间：2024/05/19 19:58

手机端横屏媒体查询

@media (max-width: 767px) and (orientation: landscape ){}

设备查询兼容手持设备

横屏：

@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 384px) and (max-device-width: 640px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 320px) and (max-device-width: 533px) and (orientation : landscape){}，

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : landscape) {}。

使用了Google浏览器的设备模拟器，很好用的，新的版本还支持查询屏幕的状态，横屏，竖屏。

两个都是依次减小的。

竖屏：

然后竖屏的居然是这样的：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 360px) and (max-device-width: 567px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 384px) and (max-device-width: 640px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 412px) and (max-device-width: 659px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 600px) and (max-device-width: 960px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation : portrait) {}。

两个都是增大的。

调了好久，好吧！！！

然后竖屏这样的才对TT

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 533px) and (orientation : portrait) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : portrait) {}
@media only screen and (min-device-width: 360px) and (max-device-width: 567px) and (orientation : portrait) {}
@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation : portrait) { }
@media only screen and (min-device-width: 384px) and (max-device-width: 640px) and (orientation : portrait) { }
@media only screen and (min-device-width: 412px) and (max-device-width: 659px) and (orientation : portrait) {}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}
@media only screen and (min-device-width: 600px) and (max-device-width: 960px) and (orientation : portrait) {}
@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation : portrait) {}

0 0