CSS 및 JS 모바일 터미널을 사용하여 휴대폰의 가로 및 세로 화면 상태를 각각 확인하는 방법

이 기사는 CSS와 JS 모바일 터미널을 사용하여 각각 휴대폰의 가로 및 세로 화면 상태를 확인하는 방법을 공유합니다. 내용이 매우 좋습니다. 도움이 필요한 모든 사람에게 도움이 되기를 바랍니다.

사용자 자동 크기 조정 기능 비활성화:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

가로 및 세로 화면 상태를 판단하는 방법에는 두 가지가 있습니다: CSS 판단, js 판단

(1), 화면이 가로인지 세로인지 판단하는 CSS

1 .같은 CSS 파일에 작성하세요

@media screen and (orientation: portrait) {  /*竖屏 css*/} 
@media screen and (orientation: landscape) {  /*横屏 css*/}

가로, 세로 화면에 맞게 크기를 설정할 때는 일반 페이지 크기를 쓰고 가로 화면 스타일을 따로 설정하시면 됩니다. 즉, 원래 스타일을 기반으로 가로 화면 스타일을 추가하기만 하면 됩니다(

@media screen and (orientation: landscape) {
  /*横屏 css*/}
当用户横屏时加载横屏样式，竖屏时取消横屏样式即加载默认样式。

2). 두 개의 CSS로 별도로 작성하고 가로 및 세로 화면에 따라 다른 스타일 파일을 참조합니다.

따라 다른 스타일 파일 참조 가로 및 세로 화면으로

가로 화면:

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

세로 화면:

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

Remarks: css는 가로 또는 세로 화면이 항상 원활하게 연결될 수 있는지 여부를 결정합니다. 즉, 가로 화면이 가로 화면을 로드합니다. style, 세로 화면은 세로 화면 스타일을 로드하며,

(2) js는 가로 화면 또는 세로 화면이 원활하게 연결될 수 있는지 결정합니다. 세로 화면

//判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {        if (window.orientation === 180 || window.orientation === 0) { 
            console.log("竖屏");
            $(".codeIg_s").removeClass('vercreen');//取消横屏样式        } 
        if (window.orientation === 90 || window.orientation === -90 ){ 
            console.log("横屏");
            $(".codeIg_s").addClass('vercreen');//添加横屏样式        }  
    }, false);

Remarks: 가로 화면 스타일은 을 수정하여 정상적으로 사용할 수 있습니다. vercreen 클래스 이름 아래의 원래 기본 스타일 단점은 트리거하려면 가로 화면과 세로 화면 사이를 전환해야 한다는 것입니다.

사용자가 가로 화면 상태를 기본으로 설정한 경우 가로 화면 조건 판단은 사용자가 가로 화면에서 세로 화면으로 또는 세로 화면에서 세로 화면으로 변경할 때만 실행됩니다. 가로 화면.

전환 상태가 없으면 조건부 판단이 수행되지 않습니다. 이는 가로 및 세로 화면에 대한 CSS 판단만큼 포괄적이지 않습니다.

관련 권장 사항:

CSS를 사용하여 버튼 텍스트 슬라이딩 효과를 얻는 방법

jQuery 브라우저 CSS3 근접 호환성 소개

위 내용은 CSS 및 JS 모바일 터미널을 사용하여 휴대폰의 가로 및 세로 화면 상태를 각각 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!