最近有人提出产品要适配横竖屏的需求，看得人头都秃了。这不是在家工作时闲着。虽然需求提出来了，但是作为前端er，我们还是要有自己的想法。我们需要收集一波数据，看看有多少人横屏使用我们的产品。Demo测试地址方案一：orientationwindow.addEventListener("orientationchange",function(event){//等于0或180度竖屏//等于90或-90度横屏_this.eventValue=event.orientation||(screen.orientation&&screen.orientation.angle)},false);使用orientationchange事件监听横竖屏的变化。使用orientation获取当前屏幕的方向角度。兼容性比较差，https://www.caniuse.com/#sear..方案二：Resize根据上一个方案的兼容性来判断宽高，所以还是做一个兼容性更好的吧。window.addEventListener("resize",function(event){_this.innerWidth=window.innerWidth_this.innerHeight=window.innerHeight},false);使用resize事件监听浏览器的宽高变化，通过比较宽高来判断当前的横竖屏状态。因为是移动端，弹出键盘的时候会干扰。兼容性当然很好。方案三：matchMedia媒体查询什么是matchMedia？matchMedia()可以解析任何CSS@media特征，例如min-height、min-width、orientation等。matchMedia()返回一个新的MediaQueryList对象，表示指定媒体查询字符串的解析结果。MediaQueryList对象有以下两个属性：media：当前查询的内容，也就是你传入的内容。matches：检查查询结果，如果匹配则值为true，否则为false。如何使用varmediaQueryList=window.matchMedia("screenand(orientation:portrait)");if(window.mediaQueryList&&mediaQueryList.addListener){mediaQueryList.addListener(function(){_this.matchMediaAddEvent=mediaQueryList.matches?'verticalscreen':'Horizo??ntalscreen'})}方案四：Mediaquery看到这个方案是不是脑子里都有问号了。这个计划和上一个有什么不同吗？哈哈，在网上看到这个解决方法。可能是此人不知道matchMediaAPI。或者是API有兼容性问题，他自己做了一个hack方法。原理也依赖css媒体查询。只是他通过定期比较模式来判断当前状态。微信公众号：前端立农
