뷰포트 또는 '표준'브라우저인지 확인하는 가장 좋은 방법

Question

iOS 모바일 Safari는 '표준'브라우저 창이 아닌 iOS 모바일 브라우저 (Android 브라우저)와 마찬가지로 뷰포트를 사용합니다. 그리고 이로 인해 overflow:hidden 및 position:fixed의 문제가 발생합니다.

이것은 불행히도 iPad와 같은 경우입니다. 나는 이것이 다른 안드로이드 타블렛을위한 경우라고 추정한다.

매번 브라우저를 스니핑하지 않고 브라우저에 뷰포트가 있는지 또는 표준인지 여부를 쉽게 판단 할 수 있습니까?

Answer 1

불행하게도, 현재 position:fixed에 대한 지원의 모바일 브라우저 '부족에 대한 좋은 수정이 없다 :

이 문서는 괜찮은 충분히 소개합니다. 그 이유는 — 다른 것들 중에서 — 브라우저 공급 업체가 문서를 확대 할 때 일어나는 일을 정확히 처리하지 못하기 때문입니다. 이유는 position:fixed이 처음에는 "손상"되었기 때문입니다.

• A tale of two viewports – part two —는 뷰포트의 작동 방식과 문제 : 당신이 어떤 독서 할 시간이 있다면, 내가보기 엔 브라우저 뷰포트를 설명합니다 다음 문서, 훌륭한, 근면 한 세부에서 모바일 fixed 위치를 둘러싼 문제를 권장합니다 모바일 브라우저의
• The fifth position value가 모바일 브라우저에서 position:fixed을 둘러싼 문제를 설명하는 환상적인 일을 (당신이 데스크톱 브라우저에서 뷰포트에 익숙하지 않은 또는 배경 정보를 원하는 경우. 또한 part one 참조), 우리는 새로운 position을해야 할 수도 있습니다 제안 값 – device-fixed.

그 기사는를 해결하는 방법을 당신에게 이유 아닌 을 줄 것이다. 실제로 fixed 직책을 맡으 셨다면, 대부분 운이 좋지 않을 것입니다. 그러나 콘텐츠 스크롤 아래에 고정 된 툴바가있는 것이 목표 인 경우 해킹 할 수있는 a few ways이 있습니다. 나는 iScroll으로 성공했습니다.

---

편집 : 당신은 터치 기반 장치에서 다음과 같은 기능 감지되고 실행하는 경우 올바른 방법은 결정 :

var isTouch = ('ontouchstart' in window); 

ontouchstart이 mobile Safari and the Android browser 트리거 된 이벤트입니다. overflow:auto을 사용하고 일반 스크롤 막대가있는 데스크톱 브라우저에는 없습니다. isTouch이 참이면 iScroll을 사용할 수 있습니다.

Answer 2

미디어 쿼리를 시도하십시오. 브라우저에서보고하는 장치 및 뷰포트 크기에 따라 스타일 시트를 포함하거나 스타일 시트의 일부분을 조건부로 적용 할 수 있습니다. http://www.alistapart.com/articles/responsive-web-design/