ipad 용 CSS 파일 만로드하려고합니다. 나는 노력이 :ipad 용 CSS 파일 만로드
<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css">
그것은 아이 패드 작동하지만 난 내 바탕 화면에 768에 의해 1024 내 해상도를 낮출뿐만 아니라 파이어 폭스에서 아이 패드 스타일 시트로드 사이트를 볼 경우. 그래서 시도 :
<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">
하지만 여전히 같은 문제. 이 스타일 시트가 iPad에서 페이지를보고있는 경우에만로드되도록하려면 어떻게해야합니까?
어떤 기술을 사용하고 있습니까? 페이지에 렌더링 할 내용 (서버 측)을 제어 할 수있는 경우 요청의 USER-AGENT 헤더를 확인할 수 있습니다. 문자열에 iPad가 포함되어 있으면 css 태그를 렌더링하고, 그렇지 않으면 포함하지 않습니다.
정적 html을 제공하는 경우에는 작동하지 않습니다.
: http://css-tricks.com/snippets/css/ipad-specific-css/
이 나를 위해 잘 작동합니다./* 일반 아이 패드 레이아웃에
@media only screen and (device-width: 768px) {
*/ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* 세로 레이아웃에만 */ }/* 가로 레이아웃에만 */ 를 들어
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}
이것이 어떻게 3 표를 얻었는지 모르겠다. 정확한 질문은 미디어 화면 크기와 관련이 있습니다. 그 이유는 이것이 iPad에만 국한된 것이 아니기 때문입니다. 데스크톱 또는 창 크기가 동일한 미디어 선언에 해당하는 경우 데스크톱보기를 망칠 수 있습니다. Matto는이 특정 질문에 대한 정답을 가졌습니다. – Suamere
다양한 화면 크기로 인해 해결 방법 나는이 문제에 대해서만 미디어 쿼리를 사용할 수 없었습니다.
내 모든 프로젝트에 이미 http://www.modernizr.com/이 포함되어 있으므로 조합을 사용할 수있었습니다. Modernizr은 터치 지원 장치에서 .touch 클래스를 추가합니다. 나는 그것이 PC가 아니라는 것을 결정하기 위해 .touch를 사용하고, 그 다음에 어떤 모바일 장치인지를 결정하는 미디어 쿼리를 사용하도록 제안 할 것입니다.
나는 이것에 대한 좋은 이유를 상상하는 데 어려움을 겪고 있습니다. – reisio