首頁 > web前端 > H5教程 > HTML5實戰與剖析之判斷行動端橫屏豎屏功能

HTML5實戰與剖析之判斷行動端橫屏豎屏功能

黄舟
發布: 2017-02-10 14:34:42
原創
2024 人瀏覽過

  在手機端經常遊走的我們很多時候都會對橫屏和豎屏的概念比較熟悉,大家都經常頭疼怎麼才能判斷這橫屏和豎屏的狀態呢,今兒夢龍就為大家分享分享。

  用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)!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板