modernizr을 사용하는 장치 감지

Question

장치 너비를 사용하여 장치를 감지하고 존중받는 js 및 css 파일을로드하는 것을 기반으로 페이지를 설계했습니다. 내가 어떻게 모더 나이저의 3 조건을 평가하고있는 나는 시도하지 말 것, 당신이 모더 나이저에서이 작업을 수행하려고하는 경우 장치 (데스크톱, 모바일 또는 태블릿)

<script type="text/javascript"> 
      Modernizr.load([ 
       { 
        test: Modernizr.mq('(min-device-width: 320px) and (max-device-width: 728px)'), 
        yep : ['mob.css', 'jquery.mobile-1.1.0.css', 'jquery.mobile-1.1.0.js'], 
        nope : 'pc.css' 
       } 
      ]); 

      if (!Modernizr.borderradius) { 
       $.getScript("jquery.corner.js", function() { 
        $("input").corner(); 
       }); 
      } 

      if(!Modernizr.required) { 
       $("#frmSearch").submit(function(){ 
        if($.trim($("#txtSearch").val().length) == 0){ 
         alert('Please, Enter some keyword'); 
         return false; 
        } 
       }); 
      } 
     </script> 

Answer 1

을 감지 할 수있는 더 좋은 방법입니다 않습니다 3 방향 조건을 작성한다. 세 가지 별도의 참/거짓 조건을 작성하십시오.

"데스크톱", "모바일"또는 "태블릿"중 하나의 조건을 갖는 대신 "데스크톱", "모바일"또는 "태블릿"이라는 세 가지 조건이 있어야합니다. 그릇된.

잘하면 답변을 귀하의 질문.

하지만 내가 제기 할 다른 사항은 이러한 유형간에 어떻게 선을 그립니까?

iPhone이 모바일이고 iPad가 태블릿이라고 쉽게 말하지만 모든 크기의 기기가 있습니다. 모바일이 태블릿이되는 컷오프 포인트는 어디에 있습니까? 랩톱이되기 위해 기본 장치에 연결할 수있는 태블릿은 어떻게됩니까?

여기에있는 문제는 폼 팩터가 매우 유동적이라는 것입니다. 따라서 어떤 장치가 속한 범주인지에 대해서는 확실하지 않을 수 있습니다. 반응 형 CSS 및 CSS 미디어 쿼리를 사용하여 사이트를 화면 해상도에 맞게 동적으로 조정하는 것이 좋습니다.

희망이 있습니다.