태블릿 장치 너비에 대한 CSS 표현

나는 css 표현으로 CSS에서 태블릿 너비를 찾아서 적용해야합니다. div 콘텐츠가 있습니다. 세로 모드에서 너비 100 %를 적용해야합니다. 가로로 돌릴 때 div는 너비를 태블릿 장치 너비의 절반 (태블릿 너비/2)으로 변경해야합니다. 이 표현 방법을 CSS에 어떻게 적용할까요?태블릿 장치 너비에 대한 CSS 표현

출처

2012-07-20 Pavan Kumar

나는 Internet Explorer 5, 6 및 7 (어떤 태블릿이 이것을 실행합니까 ??)으로 제한되어 있으므로 표현을 명확히하려고 노력할 것이고 성능이 현저히 떨어질 수 있습니다. 어쨌든,이 시도 :

이

@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
} 

@media screen and (orientation:landscape) { 
    .element { 
     width:expression(document.body.clientWidth/2); 
    } 
}

또한 더 구체적인 시도 할 수 있습니다 - 다음이 해킹으로 간주 될 것이다 (그 제안에 대한 TheBlackBenzKid 덕분에) :

/* Windows 7 Phone - WP7 */ 
@media only screen and (max-device-width: 480px) and (orientation:portrait) { 
} 
@media only screen and (max-device-width: 480px) and (orientation:landscape) { 
} 
/* Apple iPhone */ 
@media only screen and (max-device-width: 320px) and (orientation:portrait) { 
} 
@media only screen and (max-device-width: 320px) and (orientation:landscape) { 

}

을 표현을 사용하지 않는 경우 (예 : 대상 다른 브라우저와 .. 잘 정제) 당신은 방향을 감지하는 작은 자바 스크립트를 사용할 수 있으며, 다음 요소에 클래스를 추가 :

HTML :

<body onorientationchange="updateOrientation();">

자바 스크립트 :이 중 하나를 테스트하지 않았습니다

function updateOrientation() { 
    var $width; 
    if(window.innerWidth> window.innerHeight){ 
     $width = window.innerWidth/2; 
    } else { 
     $width = '100%'; 
    } 
    $(".element").css({width:$width}); 
}

을,하지만 난 그것을 생각 :

function updateOrientation() { 
    if(window.innerWidth> window.innerHeight){ 
     //we are in landscape mode, add the 'LandscapeClass' class to the element 
     document.getElementById("element").className += " LandscapeClass"; 
    } else { 
     //we are in portrait mode, remove the class 
     document.getElementById("element").className = 
      document.getElementById("element").className.replace 
       (/(?:^|\s)LandscapeClass(?!\S)/ , ''); 
}

jQuery를 사용하는 경우, 당신은 직접 요소의 (인라인) CSS를 수정하려면 다음을 시도 할 수 will will work

출처

2012-07-20 07:44:44

태블릿 장치 너비에 대한 CSS 표현

답변

관련 문제