在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉，大家都经常头疼怎么才能判断这横屏和竖屏的状态呢，今儿梦龙就为大家分享分享。
用CSS判断横屏竖屏问题。CSS代码如下
1、
@media (orientation: portrait) { } 横屏
@media (orientation: landscape) { }竖屏
2、
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏用JavaScript判断横屏竖屏问题。JavaScript代码如下
//判断手机横竖屏状态：
function hengshuping(){
if(window.orientation==180||window.orientation==0){
alert("竖屏状态！")
}
if(window.orientation==90||window.orientation==-90){
alert("横屏状态！")
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行就可以了。以上就是HTML5实战与剖析之判断移动端横屏竖屏功能的内容，更多相关内容请关注PHP中文网（www.php.cn）！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
438
收藏
