iPad 및 iPad 만 대상으로하는 CSS 미디어 쿼리?
안녕하세요 저는 여러 태블릿 장치, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad 등으로 작업하고 있습니다.
- iPad-1024 x 768
- LG 패드-1280 x 768
- 갤럭시 탭-1280 x 800
CSS3 미디어 쿼리 만 사용하여 iPad를 타겟팅하고 싶습니다. LG와 iPad의 기기 너비는 768px가 같기 때문에 각 기기를 분리하는데 어려움이 있습니다.
분리하기 위해 다음을 시도했지만 작동하지 않는 것 같습니다.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */
-webkit-device-pixel-ratio 및 기타 -webkit * 옵션과 iPad를 대상으로하는 값을 모르겠습니다. 스타일, 아이디어에 JavaScript를 사용하고 싶지 않습니까?
마침내 해결책을 찾았습니다 : CSS를 사용하여 다른 장치 플랫폼 감지
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
HTTP 호출을 줄이기 위해 기존 공통 CSS 파일 내에서도 사용할 수 있습니다.
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
.ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}
도움이 되었기를 바랍니다.
기타 참조 :
나는 이것에 대해 조금 늦었지만 위의 어느 것도 나를 위해 일하지 않았습니다.
이것이 나를 위해 일한 것입니다.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
//your styles here
}
똑같은 질문이며 답변도 있습니다 =)
http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1
@media only screen and (device-width: 768px) ...
@media only screen and (max-device-width: 1024px) ...
나는 현재 그것을 테스트 할 수 없으므로 그것을 테스트하십시오 =)
더 많은 것을 찾았습니다.
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
또는 일부 자바 스크립트로 네비게이터를 확인하고 자바 스크립트로 CSS 파일을 생성 / 추가하십시오.
일부 스크립트를 사용하여 사용자 에이전트로 장치를 대상으로 지정해야합니다. iPad 용 사용자 에이전트는 다음과 같습니다.
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
<html>
<head>
<title>orientation and device detection in css3</title>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
<div id="iphonelandscape">iphone landscape</div>
<div id="iphoneportrait">iphone portrait</div>
<div id="ipadlandscape">ipad landscape</div>
<div id="ipadportrait">ipad portrait</div>
<div id="htcdesirelandscape">htc desire landscape</div>
<div id="htcdesireportrait">htc desire portrait</div>
<div id="desktop">desktop</div>
<script type="text/javascript">
function res() { document.write(screen.width + ', ' + screen.height); }
res();
</script>
</body>
</html>
These days you can use a Media Queries Level 4 feature to check if the device has the ability to 'hover' over elements.
@media (hover: hover) { ... }
Since the ipad has no 'hover' state you can effectively target touch devices like the ipad.
참고URL : https://stackoverflow.com/questions/8271493/css-media-query-to-target-ipad-and-ipad-only
'code' 카테고리의 다른 글
| colgroup에서 텍스트 정렬 센터 사용 (0) | 2020.11.17 |
|---|---|
| C ++ : 쉼표로 숫자 형식을 지정 하시겠습니까? (0) | 2020.11.17 |
| 자바 스크립트에서 iso 날짜를 밀리 초로 변환 (0) | 2020.11.17 |
| Cygwin 오류 : "-bash : 포크 : 재시도 : 리소스를 일시적으로 사용할 수 없음" (0) | 2020.11.17 |
| "res.send"후에 코드를 실행할 수있는 이유는 무엇입니까? (0) | 2020.11.17 |