通过html标签可强制移动端浏览器横屏或竖屏但兼容性较差,目前仅有:
UC强制竖屏:<meta name="screen-orientation" content="portaint">
QQ强制竖屏:<meta name="screen-orientation" content="landscape">
通过HTML标签media识别横屏和竖屏,分别引用不同的css:
竖屏:
<link rel="stylesheet" media="all and (orientation:portrait" href="portrait.css">
竖屏:
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
通过css媒体查询判断横竖屏,并分别指定样式:
@media screen and (orientation: portrait) {
//竖屏 CSS
}
@media screen and (orientation: landscape) {
//横CSS
}
对于事件:
通过onorientationchange事件或resize事件监听手机的横竖屏,分别指定对应的事件。
强制通过页面 禁止app或手机的横竖屏的切换是不现实的,H5只能针对自身页面做适配!!!
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)