Browser Coverage and Exception Handling | 한국어

SpinViewer

일반적인 상황

SpinViewer 브라우저 호환성은 backgroundSize 라는 CSS 속성의 지원범위에 근거합니다.

backgroundSize 스타일 속성의 지원범위는 다음과 같습니다.

Internet Explorer	Edge	Chrome	Firefox	Safari	iOS	Android
9+	latest	latest	latest	latest	7+ default	2.3+ default

페이지 내 body 가 존재한다고 한다면, 다음과 간단한 조건식으로 SpinViewer 사용 가능 여부를 쉽게 판단할 수 있습니다.(feature detection)

var canUseSpinViewer = "backgroundSize" in document.body.style;

body 태그 여부와 상관없이 실제 동작 여부까지 확인할 수 있는 엄격한 브라우저 호환성을 판단이 필요하다면 Modernizr 의 사용을 추천합니다. Modernizr 는 Feature Detection 을 위해 매우 널리 사용되는 라이브러리입니다.

var canUseSpinViewer = Modernizr.backgroundsize;

예외 상황

위의 조건으로 체크되지 않는 예외 상황이 보고되었습니다. #39

Galaxy S6 Edge (5.0.2), Default Browser (3.0) 에서 다음의 상황에서 backgroundSize 계산에 오류가 발생합니다.

• 이미지타입이 jpeg (png 는 픽셀 크기 이슈 없음)이고 이미지 크기가 3.7 메가 픽셀(예, 392 x 9405)을 초과하는 경우

참고, Galaxy S6, Default Browser (3.0) 는 정상적으로 동작합니다.

따라서 위 상황을 서비스해야하는 경우라면 다음과 같이 agent 에 따른 분기 처리를 고려해볼 수 있습니다.

var ua = window.navigator.userAgent;
var isExceptionBrowser = ua.indexOf("SAMSUNG SM-G925S") >= 0 && ua.indexOf("Android 5.0.2") >= 0 && ua.indexOf("SamsungBrowser/3.0") >= 0;

canUseSpinViewer = canUseSpinViewer && !isExceptionBrowser;

참고. Galaxy S6 Edge Android 5.0.2, Default Browser 3.0 의 User Agent 정보

Mozilla/5.0 (Linux;Android 5.0.2;SAMSUNG SM-G925S Build/LRX22G) AppleWebkit/537.36(KHTML, like Gecko) SamsungBrowser/3.0 Chrome/38.0.2125.102 Mobile Safari/537.36