微日志_免费提供日志记录|作品展示|学习教程|免费日记

如何解决键盘弹出的时候,css识别横竖屏出错问题?

媒介查询横竖屏适配 阅读:62

体验地址:暂无地址

通常我们在写wap的时候 横竖屏切换会使用到@media媒体查询来实现的。

@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

如果成功帮你解决了您的问题,记得奖励一下哟~~