모바일 단말기의 가로, 세로 화면 기능을 판단하기 위한 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">竖屏

　 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)를 주목해주세요!