iphone에 대한 CSS media Query

· 5년 전 · 2406

아이폰은 아래와 같이 정해 주면 되는데,  안드로이드 폰은 제조업체별로 다 다를 것 같네요..

 

가지고 계신 폰의 화면 사이즈는 얼마일까요?   체크 눌러서 댓글로

 

[code]

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

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

}

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

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

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

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

[/code]

|
댓글을 작성하시려면 로그인이 필요합니다. 로그인

CSS

CSS 관련 공부 및 자료 공유 소모임 게시판 입니다.

+
제목 글쓴이 날짜 조회
4년 전 조회 2,387
4년 전 조회 1,287
4년 전 조회 2,737
4년 전 조회 1,627
4년 전 조회 1,740
5년 전 조회 1,191
5년 전 조회 1,399
5년 전 조회 1,565
5년 전 조회 1,434
5년 전 조회 1,435
5년 전 조회 1,597
5년 전 조회 1,717
5년 전 조회 1,831
5년 전 조회 1,545
5년 전 조회 2,407
6년 전 조회 1,727
6년 전 조회 1,573
6년 전 조회 1,559
6년 전 조회 1,513
6년 전 조회 1,509
6년 전 조회 1,695
6년 전 조회 1,862
6년 전 조회 1,327
6년 전 조회 2,716
6년 전 조회 1,480
6년 전 조회 1,384
6년 전 조회 1,052
6년 전 조회 2,277
6년 전 조회 1,305
6년 전 조회 1,214
🐛 버그신고