iPhone 5 CSS 미디어 쿼리


132

iPhone 5의 화면이 길어 웹 사이트의 모바일 화면을 보지 못했습니다. iPhone 5의 새로운 반응 형 디자인 쿼리는 무엇이며 기존 iPhone 쿼리와 결합 할 수 있습니까?

내 현재 미디어 쿼리는 다음과 같습니다.

@media only screen and (max-device-width: 480px) {}

3
기존 미디어 쿼리를 볼 수 있습니까?
BoltClock

답변:


283

또 다른 유용한 미디어 기능은 device-aspect-ratio입니다.

참고 : 9 화면 비율 아이폰 5가 (16)이 없습니다 . 실제로 40:71입니다.

아이폰 <5 :
@media screen and (device-aspect-ratio: 2/3) {}

아이폰 5:
@media screen and (device-aspect-ratio: 40/71) {}

아이폰 6:
@media screen and (device-aspect-ratio: 375/667) {}

아이폰 6 플러스 :
@media screen and (device-aspect-ratio: 16/9) {}

아이 패드 :
@media screen and (device-aspect-ratio: 3/4) {}

참조 :
미디어 쿼리 @ W3C
iPhone 모델 비교
종횡비 계산기


2
나는이 접근법을 좋아하지만 Stephen Sprawl에 의해 설명 된대로 -webkit-min-device-pixel-ratio를 추가 할 때까지 PhoneGap 앱 웹보기에서 작동하지 못했습니다 zsprawl.com/iOS/2012/09/css-media-queries-for -the-phone-5 . @ 미디어 화면과 (장치-종횡비 : 40/71) 및 (-웹킷-최소-장치-픽셀-비 : 2) {// 폰갭을위한 iphone5}
TaeKwonJoe

and (-webkit-min-device-pixel-ratio: 2)@TaeKwonJoe
Mahendra Liya

1
iPhone 6을 포함하도록 이것을 업데이트 해 주셔서 감사합니다!
Maverick

이것은 CSS에서 iphone 4와 iphone 5를 구별해야 할 때 꽤 잘 작동합니다.
euccas

1
iphone 6의 경우 (device-aspect-ratio : 667/375)는 실제 물리적 iphone 6에서 작동하지 않았습니다. 그러나 iOS 시뮬레이터에서 작동했습니다. 나는 그것을 375/667으로 바꾸었고 실제 장치에서 작동했습니다.
지금 무엇

64

이 블로그에 대해 다음 과 같이 말합니다 .

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

해당 장치에 설치된 특정 iOS 버전이 아니라 iPhone 5에 반응합니다.

기존 버전과 병합하려면 쉼표로 구분할 수 있어야합니다.

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB : 위의 코드를 테스트하지는 않았지만 @media이전에 쉼표로 구분 된 쿼리를 테스트했지만 제대로 작동합니다.

상기 내용은 Galaxy Nexus와 같은 유사한 비율을 공유하는 다른 장치에 적용될 수 있습니다. 다음은 640 픽셀 (일부 이상한 디스플레이 픽셀 이상으로 인해 560 픽셀)이고 960 픽셀 (iPhone <5) ~ 1136px (iPhone 5) 중 하나 인 기기 만 타겟팅하는 추가 방법입니다.

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

1
이 쿼리를 내 이전 쿼리와 결합하여 iphone 4와 5를 모두 잡는 방법을 제안 할 수 있습니까?
Maverick

6
이것은 iPhone뿐만 아니라 다른 전화에도 영향을 미치므로주의하십시오. 삼성 갤럭시 넥서스가 그 예입니다.
Mike Sweeney

@MikeSweeney 좋은 전화. 다른 기기를 포함하지 않아야하는 새로운 방법으로 게시물을 업데이트했습니다.
Eric

@ 에릭 그것은 여러 번의 전화 테스트를 마친 후에 상처를 입었던 것입니다-믹스에 높이를 가져와야했습니다! 내가 테스트 한 7-8 개의 다양한 전화에서 훌륭하게 작동하는 것 같습니다.
마이크 스위니

이 줄이 맞 iPhone 5 and not to iOS 6습니까? "iPhone5가 아닌 iPhone5"여야합니까?
Sgnl

38

미디어 쿼리 를 사용 max-device-width하거나 사용하는 위에 나열된 이러한 모든 답변 max-device-height은 매우 강력한 버그를 겪습니다. 다른 인기있는 모바일 장치 (아마도 원치 않으며 테스트되지 않았거나 향후 시장에 나올 것입니다)를 대상으로합니다.

이 쿼리는 화면이 더 작은 모든 장치에서 작동하며 디자인이 손상되었을 수 있습니다.

유사한 장치 별 미디어 쿼리 (HTC, Samsung, iPod, Nexus 등)와 결합하여이 연습은 시한 폭탄을 터뜨릴 것입니다. 확대를 위해이 아이디어는 CSS를 제어 할 수없는 페이지로 만들 수 있습니다. 가능한 모든 장치를 테스트 할 수는 없습니다.

항상 IPhone5를 대상으로 하는 유일한 미디어 쿼리 는 다음과 같습니다.

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

참고 정확한 폭과 높이가 아닌 최대 폭 여기에 체크합니다.


자, 해결책은 무엇입니까? 가능한 모든 장치에서 잘 보이는 웹 페이지를 작성하려면 성능 저하를 사용하는 것이 가장 좋습니다.

/ * 열화 패턴 화면 너비 만 확인합니다. 세로에서 가로로 변경됩니다 * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

웹 사이트 방문자의 30 % 이상이 모바일에서 온 경우이 구성표를 거꾸로 뒤집어 모바일 우선 접근 방식을 제공하십시오. min-device-width이 경우에 사용하십시오 . 이렇게하면 모바일 브라우저의 웹 페이지 렌더링 속도가 빨라집니다.


10
점진적인 향상과 모바일을 우선으로 생각합니다. 모바일에서 시작하여 최소 장치 너비를 사용하여 구축합니다.
primavera133

2
또한 iPhone 5 와만 일치하는 높이 / 너비 / 픽셀 비율 솔루션은 동일한 특성을 갖는 다음 휴대 전화와 일치합니다. 답변의 전반적인 주제는 정확합니다. 특정 장치의 관점에서 생각 하는 것은 잘못된 방법입니다.
Pointy

@Dan – 답변이 문제를 직접 해결하지는 않지만 반응 형 디자인을위한 모범 사례에 대한 더 넓은 관점에서 문제를 살펴 봅니다. 제 생각에 여기에 쓴 것은 매우 깊고 실용적입니다. 별 다섯 개.
Dimitri Vorontzov

@ Dan – 제안을 구현하려고하는데 문제가 있습니다. 한번 봐 주시기 바랍니다 : stackoverflow.com/questions/16486078/…
Dimitri Vorontzov

@primavera, 왜 그런지 말 해주세요. 모바일 우선 접근 방식의 장점은 무엇입니까?
S ..

7

나를 위해, 일을 한 쿼리는 다음과 같습니다.

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

7

세로 및 가로의 iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

풍경에 아이폰 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

인물 사진의 iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

max-device-width : 568px초상화 가 필요 합니까?
adi518

1
@ adi518 최대 너비를 사용하지 않으면 문자 그대로 대부분의 장치 (태블릿 데스크톱 등)와 같은 320px보다 큰 모든 장치에 CSS 규칙이 적용됩니다.
Sudheer

1
device-width: 320px and device-height: 568px대신 사용 하지 않습니까?
adi518

5

phonegapp 앱을 타겟팅하는 데 응답이 없습니다.

다음 링크 포인트와 같이 아래 솔루션이 작동합니다.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

5

몇 가지 옵션을 테스트 하고이 과정을 놓쳤을 때 매우 빠르게 추가되었습니다. 페이지에 다음이 있는지 확인하십시오.

<meta name="viewport" content="initial-scale=1.0">


0

afaik no iPhone은 1.5의 픽셀 비율을 사용합니다.

iPhone 3G / 3GS : (-웹킷 장치 픽셀 비율 : 1) iPhone 4G / 4GS / 5G : (-웹킷 장치 픽셀 비율 : 2)


0
/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

-3

"-webkit-min-device-pixel-ratio"를 1.5로 낮추어 모든 iPhone을 잡을 수 있습니까?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}

1
어느 iPhone이 1.5의 장치 픽셀 비율을 사용하고 있습니까?
BoltClock

1
장치 이름 (iPhone)이 아닌 장치 너비에 따라 미디어 쿼리를 수행하는 것이 좋습니다. 따라서 iPhone 5의 너비가 더 넓다면 사용 가능하게 만드십시오.
Tom Roggero
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.