모바일 HTML5에서 가로 및 세로 화면을 결정하는 방법

모바일 단말기에서 우리는 가로 화면과 세로 화면의 문제에 자주 부딪히는데, 가로 화면과 세로 화면을 어떻게 판단하거나 다른 코드를 작성해야 할까요? 이번 글은 HTML5(모바일 단말기)에서 가로, 세로 화면을 판단하는 방법에 대한 관련 정보를 주로 소개하고 있으니, 필요하신 분들이 참고하시면 좋을 것 같습니다.

여기에는 두 가지 방법이 있습니다.

하나: CSS가 가로 화면과 세로 화면을 결정합니다.

동일한 CSS로 작성

1. @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가 가로 화면과 세로 화면을 결정합니다

1. //判断手机横竖屏状态：   
   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 세로 화면

관련 권장 사항:

HTML5 실제 전투 및 분석 판단 모바일 가로 화면 세로 화면 기능

iPad, iPhone, Android가 가로인지 세로인지 확인하는 jQuery 기반 코드 screen_jquery

페이지에서 가로 화면을 강제 적용

위 내용은 모바일 HTML5에서 가로 및 세로 화면을 결정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!