微信默认开启了横屏模式,h5目前无法做到微信浏览器强制竖屏,。
解决思路:
1、布局时就兼容横屏,一般采用flex布局
2、当横屏时给与相应的提示!
CSS判断横屏竖屏:
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) { /*横屏 css*/ }
JS判断横屏竖屏:
// 移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { if (window.orientation === 180 || window.orientation === 0) { alert('竖屏状态!'); } if (window.orientation === 90 || window.orientation === -90 ){ alert('横屏状态!'); } }, false);