android软键盘@media 横竖屏兼容

前言

通常我们在写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