Rumah > hujung hadapan web > Tutorial H5 > HTML5实战与剖析之判断移动端横屏竖屏功能

HTML5实战与剖析之判断移动端横屏竖屏功能

黄舟
Lepaskan: 2017-02-10 14:34:42
asal
2032 orang telah melayarinya

  在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉,大家都经常头疼怎么才能判断这横屏和竖屏的状态呢,今儿梦龙就为大家分享分享。

  用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">竖屏
Salin selepas log masuk

  用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,进行执行就可以了。
Salin selepas log masuk

以上就是HTML5实战与剖析之判断移动端横屏竖屏功能的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan