版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/rth362147773/article/details/78897867
前言
通常我们在写wap的时候 横竖屏切换会使用到@media媒体查询来实现的。但我最近在一个android的项目，在webview使用媒体查询来做横竖屏区分。点击input输入框，会显示android的软键盘，而这会导致本来是竖屏的界面，变成横屏的。
@media all and (orientation : landscape) { //横屏}
@media all and (orientation : portrait){ //竖屏 }
portrait和landscape
出现这个问题我们首先要分析portrait和landscape这个2个是怎样区分的。portrait是通过输出设备中的页面可见区域高度大于或等于宽度，landscape是除portrait值情况外，都是landscape。而软键盘出现会改变可见区域的尺寸，导致变成竖屏转成横屏模式。
| 名词 | 说明 |
|---|---|
| portrait | 指定输出设备中的页面可见区域高度大于或等于宽度 |
| landscape | 除portrait值情况外，都是landscape |
如何解决
通过网上搜索发现其他人也遇到同样的问题，早就有人提出完美解决办法，是通过@media媒体查询中aspect-ratio（输出设备中的页面可见区域宽度与高度的比率），通过设置小于13/9比率为横屏，大于13/9比率就为竖屏。通过比率来区分横竖屏，可以有效地兼容软键盘出现的问题。
@media screen and (min-aspect-ratio: 13/9){ } // landscape
@media screen and (max-aspect-ratio: 13/9){ } // portrait