H5页面自动适应横竖屏

H5页面自动适应横竖屏,第1张

对于样式

通过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只能针对自身页面做适配!!!

可以适应移动设备的横竖屏,但是有的设备还是会有点问题,你可以分别写:

/*竖屏*/

@media all and (orientation : portrait){

body {

background-color: #00ff00

}

}

/*横屏*/

@media all and (orientation : landscape) {

body {

background-color: #ff0000

}

}

1. 通过在html中分别引用横屏和竖屏的样式:

2. CSS中通过媒体查询的方法来判断:

3. JS判断是否为横屏竖屏:

4. JS判断是否为横屏竖屏:

5. 当屏幕旋转的时候友情提示

效果如下:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6280694.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存