HTML5實戰與剖析之判斷移動端橫屏豎屏功能
來源:懂視網
責編:小OO
時間:2020-11-27 15:12:55
HTML5實戰與剖析之判斷移動端橫屏豎屏功能
用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"。
導讀用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"。

在手機端經常游走的我們很多時候都會對橫屏和豎屏的概念比較熟悉,大家都經常頭疼怎么才能判斷這橫屏和豎屏的狀態呢,今兒夢龍就為大家分享分享。
用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,進行執行就可以了。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
HTML5實戰與剖析之判斷移動端橫屏豎屏功能
用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"。