작은 화면의 노트북에서 iPad/Safari 용 CSS를 사용 중입니다.

다음 HTML 메타 태그 및 스타일 쿼리를 사용하여 iPad/Safari 브라우저를 타겟팅 할 수 있습니다 (iPad와 Windows의 몇 가지 사소한 변형/리눅스 브라우저) :작은 화면의 노트북에서 iPad/Safari 용 CSS를 사용 중입니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="style/tablet.css" />

그러나 tablet.css 파일도 작은 노트북 (즉,보다가 1024px있는 사람)에로드되는 - 또한 너무 큰 화면에서 확대 할 때 활동하기 시작하는 것 같다 .

장치 너비를 사용하는 것은 실제 장치/브라우저를 구분할 수있는 좋은 방법은 아니지만 인터넷을 통해 내 모든 사냥을하는 것이 가장 좋은 방법이라고 말합니다.

다른 방법이 있습니까?

출처

2012-12-19 HorusKol

당신은 당신은 터치 이벤트 지원을 감지하는 모더 나이저를 사용할 수 있습니다 중이

을 위해 자바 스크립트로 복귀해야합니다

http://modernizr.github.com/Modernizr/touch.html

당신이 터치를 타겟팅 할 수 있도록

모더 나이저는 <html> 태그에 클래스를 추가합니다 장치를 아주 쉽게 지원합니다.

정확성을 원한다면 javascript로 사용자 에이전트를 검색하십시오.하지만 업데이트 및 새로운 태블릿 OS 릴리스의 경우 정기적으로 업데이트해야합니다.

출처

2013-02-01 02:29:30

나는 현대적인 터치 테스트가 갈 길이 멀다고 생각합니다. 그 크기와 스크린 크기를 합치면 태블릿과 휴대 전화의 적응을 돕습니다. 감사. – HorusKol

만들기 당신의 @media 잡초 아웃 원치 않는 장치를 도움이 될 것입니다 좀 더 미세한 입자가/더 나은 브라우저를 쿼리 : -webkit-min-device-pixel-ratio: 및 orientation를 사용

<link rel="stylesheet" media="only screen and (max-device-width: 1024px) and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2)" href="style/tablet.css" />

화면의 크기보다 아이 패드/전화 훨씬 더 구체적이다.

출처

2013-02-04 06:02:00 Dawson

ipad가 언제 풍경에 있습니까? 오리엔테이션 만 필요로하는 – HorusKol

은 모든 데스크탑/랩톱 브라우저를 제거해야합니다. 기능이 없기 때문입니다. 픽셀 비율 2는 망막 디스플레이에 특유하다. – Dawson

내 목표는 본질적으로 창을 너무 작게 잡아서, 무엇이라도 들어가면 99 %의 시간이 걸리므로 i 디바이스라고 추측 할 수있다. Apple의 CSS 참조 : https://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW1 – Dawson

작은 화면의 노트북에서 iPad/Safari 용 CSS를 사용 중입니다.

답변

관련 문제