모바일 웹을 위한 브라우저 크기 및 기기 정보 체크하는 자바 스크립트
최근 모바일 웹을 지원하는 반응형 웹을 만드는 경우가 많다. 미디어쿼리나 부트스트랩(Bootstrap)을 활용해서 쉽게 반응형 웹을 만들기도 하지만 경우에 따라서 직접 모바일 기기인지 체크해야 하는 때도 많다. 그렇다면 모바일 브라우저를 어떻게 구분해 낼까? 자바스크립트로 브라우저 크기 구분 먼저 브라우저의 크기로 구분해 내는 방법이 있다. 자바 스크립트의 document.body.clientWidth 값을 가져와서 사용하면 된다. 소스를 살펴보자 if (document.body.clientWidth < 800) { // 모바일 기기 관련 작업 } 실제 몇몇 기기의 document.body.clientWidth의 값을 체크해 보면 다음과 같다. 디바이스 인치 세로모드 가로모드 아이폰 6 4.7인치 375..
모바일 웹 사이트 제작을 위한 표준~
스마트 폰 사용자들이 점차 늘어남에 따라 모바일 웹 사이트 제작도 많이 늘고 있는 것 같습니다. 기존 포털 뿐만 아니라 대부분의 웹 사이트들이 모바일 웹도 기존 웹과 함께 제작하고 있으며, 하이브리드 앱이라는 컨셉으로 기존의 App과 Web의 장점을 살려 혼합한 모델들도 나오고 있는 것 같습니다. 모바일 웹을 만드는데 어떤 점들을 주의해야 할까요? 여러가지 있겠지만 웹 표준을 담당하는 W3C의 자료를 토대로 정리해 보고자 합니다. 다음 사이트를 보면 W3C에서 권고하는 Best Practice에 대한 한글 설명이 있습니다. http://www.w3c.or.kr/Translation/mwbp_flip_cards/ 하나의 웹을 위한 설계: 다양한 장비를 고려하여 설계한 콘텐츠는 비용을 절감시키고, 유연성을 ..