반응 형 웹 디자인 및 사용자 에이전트 스니핑

CSS3 media쿼리 기능은 다양한 화면 크기와 장치에 맞게 조정되는 웹 사이트 개발 측면에서 많은 흥미로운 가능성을 이끌어 냈습니다.

그러나 실제로 CSS3 media쿼리 기능과 전체 "응답 성 웹 디자인"움직임이 약속에 미치지 못할 수도 있다는 생각을하기 시작했습니다.

내가 보는 문제는 웹 개발자가 하루가 끝날 무렵 사용자가 데스크톱, 태블릿 또는 모바일 장치를 통해 콘텐츠를보고 있는지에 관심이 있다는 것입니다. 그러나 CSS3는 화면 해상도 를 감지하는 수단 만 제공합니다 . 이론적으로 화면 해상도를 감지하면 다양한 장치를 조정하는 좋은 방법 인 것 같습니다. 그러나 실제로는 ...

화면 너비를 출력하는 간단한 Javascript 함수가 있다고 가정하십시오.

function foo()
{
   alert(screen.width);
}

내 Blackberry Touch에서 다음이 출력됩니다.

768

내 Samsung Galaxy에서는 다음과 같이 출력됩니다.

800

음,이 시점에서, 주류 스마트 폰의 해상도는 데스크탑 수준의 해상도에 가깝습니다. 사용자가 스마트 폰, 태블릿 또는 데스크톱을 통해 웹 사이트를보고 있는지 여부를 감지하는 기능은 화면 해상도 만 있으면 점점 어려워 보입니다.

이를 통해 미디어 쿼리를 기반으로 한 CSS3 "응답 성 웹 디자인"운동의 배후에있는 모든 지혜를 의심하게되었습니다. media쿼리 기능이 다양한 모바일 장치가 아닌 데스크탑 화면의 크기 조정 브라우저 창에 적응하는 데 더 적합한 것 같습니다 .

모바일 또는 태블릿 장치를 감지하는 또 다른 가능한 기술은 ontouchstart이벤트가 지원 되는지 확인하여 기능 감지를 사용 하는 것입니다. 그러나 많은 데스크탑 화면이 터치를 지원하기 시작함에 따라 이것조차 신뢰할 수 없게되고 있습니다.

질문 : 웹 개발자로서 RWD 또는 기능 탐지에 의존 할 수없는 경우 사용자 에이전트 스니핑이 (항상 믿을 수 없을만큼) 모바일 장치를 탐지하는 가장 좋은 방법입니까?

특정 장치에 대해 너무 걱정하지 마십시오.

사용자가 스마트 폰, 태블릿 또는 데스크탑을 통해 웹 사이트를보고 있는지 감지하는 기능은 화면 해상도만으로도 점점 어려워 보입니다.

되는 설계 할 때 비틀기를하고 있습니다에있는 좋은 화면 해상도를 통해 감지하기가 점점 더 어려워지고, 더 많은 장치가 시장에 진입으로 만 열심히 얻을 것이다, 그러나 미디어 쿼리의 목적은 미디어 쿼리 types.What 장치를 검색하지 않는 것입니다 더 이상 현재 치수에서 사용하는 것이 더 이상 즐겁지 않습니다. 사이트의 너비가 550px로 떨어지기 시작하면 해당 크기의 장치가 있는지 여부는 중요하지 않습니다. 중단 점을 설정하십시오.

기능 감지와 동일합니다. 기기가 터치를 지원하는 경우 휴대 기기 또는 미래의 벽 크기 모니터라면 무엇이 중요합니까? 어느 쪽이든 터치 향상이 유용 할 것입니다.

언급했듯이 사용자 에이전트 스니핑은 완전히 신뢰할 수 없습니다. 정말로 원한다면 User-agent 문자열을 Shakespeare 따옴표로 변경할 수 있습니다. 그러면 귀하의 사이트가 내 브라우저에 대해 무엇을 결정 하시겠습니까?

또한 사용자 에이전트는 모든 가능성을 처리하기 위해 많은 작업이 필요합니다. 안드로이드에 Firefox 용이 있습니까? iOS의 Chrome? 프로 요에 돌고래? WiiU 브라우저? 기존 LG 피처 폰의 극도로 제한된 브라우저? 스라소니? IE 13? 연결? 족제비? 블랙 베리 플레이 북의 브라우저? 태블릿에서 실행되는 Opera와 휴대 전화에서 실행되는 Opera의 차이점을 어떻게 알 수 있습니까?

이 목록은 시간이 지남에 따라 커질 수 있습니다.

사용자 에이전트도 있습니다. Google을 사용하는 경우 사용자 에이전트와 현실의 목록을 찾을 수 있습니다. 이것이 문제입니다. 어떤 장치는 어떤 종류의 장치인지 결정하기 위해 dpi 설정을 보는 데 의존합니다.