<wbr id="fyfl4"></wbr>

          <sub id="fyfl4"><address id="fyfl4"></address></sub>

                <wbr id="fyfl4"></wbr>
                <sub id="fyfl4"></sub>

                
                

                <nav id="fyfl4"></nav>
                <form id="fyfl4"></form>
                <nav id="fyfl4"></nav>
                  1. 當前位置:首頁 > 網站教程 > 內容列表

                    HTML5中判斷手機橫屏豎屏的方法,如何判斷手機橫屏豎屏

                    點擊次數:更新時間:2018-04-04 20:04:25【打印】【關閉】

                    在移動端中我們經常碰到橫屏豎屏的問題,那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。

                    這里有兩種方法:

                    一:CSS判斷橫屏豎屏

                    寫在同一個CSS中

                    @media screen and (orientation: portrait) {   

                      /*豎屏 css*/   

                    }    

                    @media screen and (orientation: landscape) {   

                      /*橫屏 css*/   

                    }  

                    分開寫在2個CSS中

                    豎屏

                    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   

                    橫屏

                    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">   

                    二:JS判斷橫屏豎屏

                     

                    //判斷手機橫豎屏狀態:   

                    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {   

                            if (window.orientation === 180 || window.orientation === 0) {    

                                alert('豎屏狀態!');   

                            }    

                            if (window.orientation === 90 || window.orientation === -90 ){    

                                alert('橫屏狀態!');   

                            }     

                        }, false);   

                    //移動端的瀏覽器一般都支持window.orientation這個參數,通過這個參數可以判斷出手機是處在橫屏還是豎屏狀態。

                    屏幕方向對應的window.orientation值:

                    ipad,iphone: 90 或 -90 橫屏
                    ipad,iphone: 0 或180 豎屏
                    Andriod:0 或180 橫屏
                    Andriod: 90 或 -90 豎屏

                    BEESCMS最好用的免費企業網站程序_PHP開源,免授權!
                    客服

                    工作時間

                    周一至周日

                    8:00 - 18:00

                    在線客服

                    點擊這里給我發消息 BUG反饋

                    點擊這里給我發消息 網站建設

                    點擊這里給我發消息 域名空間

                    點擊這里給我發消息 授權服務

                    點擊這里給我發消息 售前咨詢

                    點擊這里給我發消息 意見反饋

                    點擊這里給我發消息 銷售客服

                    聯系手機

                    18288433386

                    真正赚钱游戏-电脑兼职赚钱日结
                    powerd by BEESCMS