2016-09-01 2 views
0

기기 방향 변경 (Android 전화)으로 인해 screen.width이 변경되는 것으로 나타났습니다. 예를 들어 내 화웨이 안드로이드 폰의 초상화 위치에있는 경우 screen.width = 360px, 가로 640px. 오리엔테이션 변경 및 screen.width

@media screen and (max-device-width:360px){ 
    div { 
    background-color: green; 
    } 
} 
@media screen and (min-device-width:361px){ 
    div { 
    background-color: blue; 
    } 
} 

가 작동하지 않습니다

: 그 (적어도 내가 아는 한) screen.width 아래의 코드가 왜 device-width 속성 값을 보유하고 고려?

screen.width과 연결된 경우 screen.width처럼 실제 장치 방향에 따라 값을 변경하면 안됩니까?

+0

http://jsbin.com/kusikelejo/edit?html,css,output 무엇이 작동하지 않습니까? 잘 작동하는 것 같습니다. 출력 프레임 크기를 조정 해보십시오. – cjmling

+0

데스크톱을 신경 쓸 필요가 없습니다. 필자는 모바일 안드로이드 폰에서 코드를 테스트하고 있습니다. 그리고 위의 'device-width'해결책은 작동하지 않습니다. 배경색은 장치 방향 변경과 함께 변경되지 않습니다. – Mulligun81

+0

방금 ​​크롬 앱으로 휴대 전화의 jsbin 링크를 확인했습니다. 여하튼 변화하고 있습니다 * - * – cjmling

답변

0

장치 폭는 장치의 화면 해상도가

당신이 뭔가를 원하십니까 즉, 장치 자체의 폭을 의미?

/* Portrait */ 
@media screen 
    and (device-width: 360px) 
    and (device-height: 640px) 
    and (-webkit-device-pixel-ratio: 3) 
    and (orientation: portrait) { 
    div { 
    background-color: green; 
    } 
} 

/* Landscape */ 
@media screen 
    and (device-width: 360px) 
    and (device-height: 640px) 
    and (-webkit-device-pixel-ratio: 3) 
    and (orientation: landscape) { 
    div { 
    background-color: blue; 
    } 
} 
+0

죄송합니다. 나는 당신이 보여 주신 해결책에 대해 잘 알고 있습니다. 나는'screen.width'가 왜 장치 방향과 함께 변경되는지,'screen.width'가 왜 안되는지 알고 싶습니다. – Mulligun81

+0

device-width 장치에서 정적 값을 가져오고 screen.width는 사용할 수있는 공간을 얻습니다. – HudsonPH

+0

당신은 문서를 여기 https://drafts.csswg.org/mediaqueries-3/#device-width – HudsonPH