Windows Phone 8 : CSS 방향이 인식되지 않습니다.

CSS에서 모든 모바일 장치의 방향을 선택하려고 시도하고 방향 변경시 일부 CSS가 트리거됩니다. (바 잘 작동 모든 웹킷 브라우저 (안드로이드, IOS), 심지어 바탕 화면에서 이제Windows Phone 8 : CSS 방향이 인식되지 않습니다.

 .portrait, .landscape { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 

    .portrait {display: block;} 
    .landscape {display: none;} 

    @media screen and (orientation:landscape) { 
     .portrait {display: none;} 
     .landscape {display: block;} 
    }

이 코드의 간단한 테스트입니다 :

<div class="orientation"> 
     <span class="landscape">Landscape</span> 
     <span class="portrait">Portrait</span> 
    </div>

는과 CSS입니다 몇 가지 장치)하지만 새 창에서 전화 8 장치는 변경 사항을 적용하지 않습니다.

그러나에서 : (노키아 루미아 920)

또한, 즉 일부 자바 스크립트 리소스를 한 번 봐 (그래도 난 더 자바 스크립트 대단한 생각하지 않습니다)을 했어 내가 말할 수있는, 그것은 여전히 윈도우 폰 8 장치에서 작동하지 않습니까?

특정 MS css 코드가 필요합니까? 아니면 다른 방법으로 사용합니까? 크로스 브라우저/크로스 모바일 장치가 가능한 자바 스크립트를 사용하면 변경 사항을 적용하고 변경시 body 태그에 클래스를 추가 할 수 있습니다.

도움을 주시면 감사하겠습니다. 감사합니다.

출처

2012-12-03 Arathol

, 당신은 자바 스크립트의 조각을 추가하고 단지'경고 (window.orientation를) 할 수있는;'에 풍경과 방향에 차이가 있는지 확인하십시오. 그러나 그것이 미디어 질의를 무시한다는 사실은 큰 성가신 일입니다. –

가장 확실합니다.나는 미디어 쿼리에 관한 몇 가지 다른 정보를 찾았으며 창 8은 이것을 지원합니다 : '@media (-ms-view-state : 전체 화면 - 풍경)' '@media (-ms-view-state : filled)' '@media (-ms-view-state : snapped)' '@media (-ms-view-state : fullscreen-portrait)' JS 및 CSS를 사용하여 메트로 앱을 정상적인 사이트에서도 마찬가지입니다. Windows Phone 8이 이것을 지원하는지 확실하지 않습니다. 아직 테스트 중이 야. – Arathol

OK, 앞에서 언급 한 "ms-view-state"미디어 쿼리는 분명히 보이는 Windows 8 앱에만 해당됩니다. – Arathol

@media all and (orientation:landscape)은 올바른 방향입니다. build2012 WP8 및 HTML에 대한 강연에서 라이브 데모가 있습니다. WP8 IE10 @http://channel9.msdn.com/Events/Build/2012/2-015

출처

2012-12-03 21:19:00 JustinAngel

감사합니다. @justinAngel. 나는 손에 실제 전화 장치를 테스트하자 마자 그것을 살펴볼 것입니다. 내 코드에서 알 수있는 것은 내가 "화면"만 타겟팅하는 반면 미디어 쿼리에 대해 "모두"를 타겟팅한다는 것입니다. Windows 전화가 실제로 "화면"을 사용하여 미디어 쿼리를 선택하지 않을까요 ?? 이상한. 나는 내가 찾은 것을 알려주고 이것을 대답하기 위해 되돌아 올 것이다. 감사! – Arathol

안녕하세요 @JustinAngel입니다. 나는 이것이 확실히 Nokia lumia 920에서 작동하지 않는다는 것을 확인할 수 있습니다 (IE10과 함께). http://goo.gl/OxPmQ에서 빠른 테스트 페이지를 만들었습니다. 나 자신이 아닌 다른 사람이 새 Windows Phone 8 장치로이를 테스트하고 작동하는지 여부를 알려주십시오. (IE10이 설치된 Windows Phone 8 임 - IE9가 설치된 이전 버전의 Windows Phone 8은 완벽하게 작동합니다. 즉, OS를 업그레이드 한 HTC HD7) – Arathol

게시 한 오류가 어떤 이유로 든 개발 서버 문제 인 것 같습니다. Visual Studio에서 프로젝트를 구축하고 IIS의 내 로컬 컴퓨터에 게시 한 다음 테스트를 위해 모바일 장치를 사용하여 사이트에 액세스합니다. 모든 모바일 장치는 미디어 쿼리를 선택하지만 Windows 전화는 그렇지 않습니다. 그래서 내가 현지화 된 문제라고 생각하지 않았습니다. 적절한 라이브 테스트 서버에 사이트를 게시 할 때 미디어 쿼리가 모든 장치에서 정상입니다. 이상하게 여겨지지만, 또 다른 문제는 다른 시간입니다. – Arathol

에 따르면, blog entry에 따르면 웹 페이지를 로컬에서 볼 때 IE는 인트라넷 사이트에 대해 하위 호환 모드로 기본 설정됩니다. 이것은 의도 한대로 작동하지 않게하는 원인 일 수 있습니다. 다음과 같은 메타 태그를 추가하여 문제를 해결할 수 있습니다

<meta http-equiv="x-ua-compatible" content="IE=edge" />

출처

2013-01-07 19:38:26 Milo

감사합니다. Milo, 다음번에 시도해보십시오! 잘 알고, – Arathol

덕분에, 그것은 노키아 lumia 1020 메일 클라이언트에 내 버그를 해결합니까! – Iggy

를이 오래된 질문을 조금이지만, 나는 표면 프로 2 태블릿에 IE11를 인식하지 못한 방향으로이 같은 문제가 있었다. 그것은 공백으로 내려갔습니다. 다른 사람이 같은 문제가있는 경우 솔루션을 공유 할 것이라고 생각했습니다.

은 작동하지 않습니다 :
@media all and (orientation : portrait) {

작품 : 테스트로
@media all and (orientation:portrait) {

출처

2014-06-18 16:07:25

Windows Phone 8 : CSS 방향이 인식되지 않습니다.

답변

관련 문제