Javascript에 대한 미디어 쿼리 접근법

Question

CSS 미디어 쿼리를 사용하는 것과 같은 디바이스 유형을 기반으로 JS를 구현/호출하는 방법을 찾고 있습니다.

<link rel="stylesheet" type="text/css" href="desktop.css" media="all" /> 
<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (device-width:768px)" /> 

마찬가지로 우리는 if 문 바로이

처럼

if (navigation.userAgent.match(/iPad/) != null) 

을 분리하기 위해 사용하는 것입니다 일부 JS를 정의하고 디바이스 (데스크탑/모바일)

내가 하나의 확실한 방법을 알고에 따라 그들을 호출 할 수 있습니다

하지만 내가 뭘보고 오른쪽 JS가로드되어야합니다/예 : 장치에 전화 데스크톱 용 desktop.js와 iPad 용 iPad.js 만 호출해야합니다 (CSS 미디어 쿼리 렌더링과 유사)

좋습니다.

Answer 1

동적 같은 페이지에 올바른 파일의 스크립트 태그를 넣을 수 있습니다 :

var head = document.getElementsByTagName('head')[0]; 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
if (navigation.userAgent.match(/iPad/) != null) { 
    script.src = 'ipad.js'; 
} else { 
    script.src = 'desktop.js'; 
} 
head.appendChild(script); 

Answer 2

이것은로 정제해야합니다

// put this in the end of the page to add JS to body (perfomance optimisation on loading behaviour 

var body = document.getElementsByTagName('body')[0]; 
var script = document.createElement('script'); 
script.type = 'text/javascript'; // you can omit this when using HTML5 Doctype 
if (navigation.userAgent.match(/iPad/) != null) { 
script.src = 'ipad.js'; 
} else { 
    script.src = 'desktop.js'; 
} 
body.appendChild(script);