장치를 기준으로 2 개의 뷰포트를 사용하는 방법

Question

내가 만든 사이트를 모든 장치와 데스크톱에서 훌륭하게 보이지만 iPad 용으로 다른 뷰포트를 설정해야합니다. iPad를 내 데스크톱 버전과 동일한 너비로 설정해야합니다. , 데스크톱 버전은 너비가 1100 픽셀입니다. 그래서 iPad에서는 화면에서 사라집니다. 전체 사이트는 최대 비율 및 EMS로 설정되어 있습니다 (최대-장치 폭 : 736px), 둥지 위로는 아이 패드, 그리고 내가 뷰포트를

을 변경해야 내가이 사용하고 후 : <meta name="viewport" content="width=device-width, initial-scale=1.0">

을

내가 그것을 내가 지금 뷰포트 내용 = 설정해야합니다, 잘 작동하지만 말했듯이 "폭 = 1100"난 그냥 다른 CSS의 전체를 많이 변경하지 않고도 @mediaquery와 CSS에서이 작업을 수행 할 수

어떻게 iPad 용 다른 뷰포트를 사용할 수 있습니까?

Answer 1

당신은 CSS를 편집하고 미디어 쿼리를 추가하기 만하면됩니다. 다음은 그 예입니다.

/* Smartphones (portrait and landscape) ----------- */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) { 
 
/* Styles */ 
 
} 
 

 
/* Smartphones (landscape) ----------- */ 
 
@media only screen 
 
and (min-width : 321px) { 
 
/* Styles */ 
 
} 
 

 
/* Smartphones (portrait) ----------- */ 
 
@media only screen 
 
and (max-width : 320px) { 
 
/* Styles */ 
 
} 
 

 
/* iPads (portrait and landscape) ----------- */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) { 
 
/* Styles */ 
 
} 
 

 
/* iPads (landscape) ----------- */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) { 
 
/* Styles */ 
 
} 
 

 
/* iPads (portrait) ----------- */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) { 
 
/* Styles */ 
 
} 
 

 
/* Desktops and laptops ----------- */ 
 
@media only screen 
 
and (min-width : 1224px) { 
 
/* Styles */ 
 
} 
 

 
/* Large screens ----------- */ 
 
@media only screen 
 
and (min-width : 1824px) { 
 
/* Styles */ 
 
} 
 

 
/* iPhone 4 ----------- */ 
 
@media 
 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
 
only screen and (min-device-pixel-ratio : 1.5) { 
 
/* Styles */ 
 
} 
 
/* iPhone 6 landscape */ 
 
@media only screen and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (orientation: landscape) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
{ } 
 

 
/* iPhone 6 portrait */ 
 
@media only screen 
 
    and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (orientation: portrait) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
{ } 
 

 
/* iPhone 6 Plus landscape */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (orientation: landscape) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
{ } 
 

 
/* iPhone 6 Plus portrait */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (orientation: portrait) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
{ } 
 

 
/* iPhone 6 and 6 Plus */ 
 
@media only screen 
 
    and (max-device-width: 640px), 
 
    only screen and (max-device-width: 667px), 
 
    only screen and (max-width: 480px) 
 
{ } 
 

 
/* Apple Watch */ 
 
@media 
 
    (max-device-width: 42mm) 
 
    and (min-device-width: 38mm) 
 
{ }