iphone에 대한 CSS media Query

· 2020-05-13 (수) 12:03:09 · 2745

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

 

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

 

[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

89건

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

+
제목 글쓴이 날짜 조회
05-09 조회 66
23-07-22 조회 789
23-07-21 조회 721
22-09-20 조회 1,157
22-09-02 조회 1,473
22-03-19 조회 1,341
22-02-12 조회 1,250
21-05-06 조회 1,675
21-05-05 조회 2,410
21-04-07 조회 1,900
21-03-26 조회 1,524
21-03-14 조회 1,648
21-02-20 조회 3,977
21-02-19 조회 2,648
21-02-15 조회 1,540
21-02-13 조회 3,011
21-02-11 조회 1,884
21-02-07 조회 2,010
21-01-05 조회 1,461
20-12-30 조회 1,627
20-09-27 조회 1,860
20-09-04 조회 1,696
20-08-22 조회 1,712
20-07-01 조회 1,876
20-06-30 조회 1,997
20-06-27 조회 2,096
20-06-13 조회 1,821
20-05-13 조회 2,746
19-06-08 조회 2,018
19-05-14 조회 1,864