iPhone 5의 화면이 길어 웹 사이트의 모바일 화면을 보지 못했습니다. iPhone 5의 새로운 반응 형 디자인 쿼리는 무엇이며 기존 iPhone 쿼리와 결합 할 수 있습니까?
내 현재 미디어 쿼리는 다음과 같습니다.
@media only screen and (max-device-width: 480px) {}답변
또 다른 유용한 미디어 기능은 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 모델 비교
종횡비 계산기
답변
@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 */
}답변
미디어 쿼리 를 사용 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이 경우에 사용하십시오 . 이렇게하면 모바일 브라우저의 웹 페이지 렌더링 속도가 빨라집니다.
답변
나를 위해, 일을 한 쿼리는 다음과 같습니다.
only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)답변
세로 및 가로의 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*/
}답변
phonegapp 앱을 타겟팅하는 데 응답이 없습니다.
다음 링크 포인트와 같이 아래 솔루션이 작동합니다.
@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
// css here
}답변
몇 가지 옵션을 테스트 하고이 과정을 놓쳤을 때 매우 빠르게 추가되었습니다. 페이지에 다음이 있는지 확인하십시오.
<meta name="viewport" content="initial-scale=1.0">