휴대 전화 회전시 변수 변경 JS

Question

Google 검색 및이를 수행하는 방법에 대한 연구를 수행했지만 제대로 작동하지 못했습니다. width라는 변수를 선언했습니다. 내 JS가 화면의 너비가 660px보다 작 으면 너비는 140px가되어야하며 그렇지 않으면 100px가되어야합니다. 변수 "width"는 장치 "phone"을 돌릴 때만 변경해야하지만 작동하지 않습니다. 변수를 장치 회전 시마다 화면 너비를 확인해야합니다. 당신의 크기 ... 실제 화면보기의 D.O.M.의 특정 요소를 변경하려고 무엇

JS

var width = 0; 
    function check() 
    { 

if (window.innerWidth < 660) 
    { 
    width = 140; 
    } 
    else{ 
    width = 100; 
    } 
} 


window.addEventListener("orientationEvent", check); 
document.write(width); 

Answer 1

?

코드를 처음 보았을 때 크기를 변경하려고하는 특정 사실을 모른 채 사용하면 Javascript를 사용해야하는 것은 아닙니다. CSS에서 미디어 쿼리를 사용해야합니다.

사이트에 대한 응답 성을 만들려고한다면 (이론적으로) 일부 자바 스크립트를 사용할 수는 있지만 실제 "해킹"이고 효율적인 코딩은 아닙니다. 그것은 다른 것들 중에서 귀하의 사이트를 느리게하는 데 도움이 될 수 있습니다.

다음은 일반적인 예를 제공하지만 두 가지 중요한 사항에 유의해야합니다. 그들은 다음과 같습니다 HTML 파일의 "머리"섹션에서

1), 다음과 같은 코드를 넣어해야합니다

<meta name="viewport" content="width=device-width, initial-scale=1"/> 

2) 코드는 아래의 "방향을"언급, 당신은 넣어해야 하나 " 풍경 "또는"초상화 "를 선택하십시오.

그것은 다음과 같이 보일 것입니다 :

@media screen and(max-width: 660px) 
       and(orientation: landscape) { 
        /* In this commented out area between the 2 curly brackets, you should put the css code of the elements you want to have resize */ 
} 

나는이 도움이되기를 바랍니다.

JQuery와 :

$(window).resize(yourFunction); 

일반 :

Answer 2

당신은 이벤트의 크기를 조정 창을 사용할 수

window.onresize = function(){yourFunction};; 

또는

window.addEventListener("resize", yourFunction);