브라우저 너비에 따라 다른 자바 스크립트 파일을 제공하는 방법

그래서 특정 브라우저 너비에 맞는 특정 자바 스크립트 파일을 원합니다. @media는 브라우저 너비 및 일부 장치에 따라 특정 CSS를 제공한다는 것을 알고 있습니다. 어떻게 서버 측 호출을 사용하지 않고 Javascript 파일과 비슷한 작업을 수행 할 수 있습니까?브라우저 너비에 따라 다른 자바 스크립트 파일을 제공하는 방법

자바 스크립트로 브라우저 너비에 따라 다른 자바 스크립트 파일을 호출 할 수 있습니까? 그렇다면 어떻게?

미리 감사드립니다.

출처

2011-01-26 ClosDesign

왜 다른 자바 스크립트 파일이 필요합니까? 사용자가 창 크기를 조정하면 어떻게됩니까? –

나는 다양한 너비에 대해 서로 다른 코드가 필요하다는 것을 거의 의심하지 않고 논리에 더 잘 부합합니다. –

미디어 쿼리를 사용하면 좋을 것입니다. js가 필요한 많은 요소는 더 이상 모바일 스타일 시트와 함께 존재하지 않습니다. 브라우저가 특정 너비 아래로 떨어지면 개인적으로 js로드를 중지하고 싶습니다. –

이유는 확실하지 않지만 JavaScript 스크립트 파일을 통해 JS 스크립트를 가져올 수 있습니다.

다음 링크는 이에 대한 정보를 제공합니다.

- 왜이 일을 찾고있다? 물론 화면의 해상도를 얻은 다음 JS 파일을 변경할 필요없이 이러한 변수를 기반으로 계산/내용을 조정할 수 있습니다. 매우 다양한 해상도 (모바일 장치, 다중 모니터, 와이드 스크린, 프로젝터 등)가 있습니다. 사용자는 브라우저의 크기를 효과적으로 조정하여 효과적으로 사용할 수 없습니다.

출처

2011-01-26 23:26:06

저는 주로 모바일 창 크기의 아코디언 메뉴와 데스크톱 브라우저 크기의 페이드 인 메뉴를 전환하는 방법을 모색 중입니다. – ClosDesign

@ 카를로스 : 요즘 모바일 장치로 데스크톱 페이지를 사용하는 단일 사이트에 대해 알지 못합니다. 나는 너 자신을 머리 아파하고 브라우저 포워딩을 살펴보고 사이트 자체에 대해 더 걱정할 것이다. 게다가 ** 매우 간단한 사이트가 아니라면 어쨌든 모바일 용으로 간소화하기를 원할 것입니다 (컷 미디어, 초과 그래픽 등) –

var scriptSrc = 'js/defaults.js'; 
if (screen.width <= 800) 
    scriptSrc = 'js/defaults-800.js'; 
else if (screen.width <= 1024) 
    scriptSrc = 'js/defaults-1024.js'; 
var script = document.createElement('script'); 
script.src = scriptSrc; 
var head = document.getElementsByTagName('head')[0]; 
head.appendChild(script);

아마도? 화면 해상도에 따라 동적으로로드합니다. 문서 크기, 브라우저 크기 등을 사용할 수도 있습니다. 비록 내가 긍정적이지는 않지만 실제로 이것을하고 싶습니다. 이상적으로 디자인에서 상대 메트릭 (% 또는 em과 같은)을 처리하고이를 방지해야합니다.

출처

2011-01-26 23:27:30

II는 id를 설정하여 jQuery와 simliar를 시도했습니다. 기본 스크립트 태그에 추가 한 다음이를 기반으로 파일을 전환합니다. 난 당신의 방식대로 그것을 시도 할 수 있습니다, 방화범에 파일을로드하려고하는 페이지에 오류가 발생했습니다. 모든 경로는 정확하지만이 방법으로 추가 할 수 있습니다. – ClosDesign

이것을 사용하여 특정 파일을 생략 할 수 있다고 생각하십니까? – ClosDesign

@ 카를로스 : 가능합니다. 중요한 점은 필요할 때까지로드 프로세스에서 피할 필요가 있다는 것입니다. 몇 가지 심각한 재 선언을하지 않고 이미로드 한 파일을 언로드 할 수 있습니까? 멋진 스크립트를 원한다면 스크립트를 상대 크기를 기반으로 실행하거나, 여러 버전을 만들지 만 공통 접근 자 하나에 바인딩하거나,이 경로에서 계속해서 적용 할 항목을로드 할 수 있습니다. –

이 시도 :

var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 

if (window.document.body.clientWidth == XXX) { 
    fileref.setAttribute("src", "script1.js") 
} else { 
    fileref.setAttribute("src", "script2.js")

}

출처

2011-01-26 23:27:43

미디어 쿼리가 다른 창 폭에 대한 대안 스타일을 제공하는 좋은 솔루션입니다. 아쉽게도 <script> 요소가 비슷하게 진행될 수있는 media 특성이 없습니다.

그러나 미디어 쿼리에 따라 브라우저에서 선택한 스타일 시트에 따라 원하는 .js 파일을로드하는 스크립트로드 스크립트를 제공 할 수 있습니다. 나는 이것을 직접적이고 우아한 방식으로하는 법을 알지 못한다. 그러나 그것을위한 좋은 해킹이있다. 각 .css을 고유 선언 (더미, 중요하지 않거나 디자인에 따라 다름)으로 "표시"하고 브라우저에서 적용된 스타일 시트를 판별하기 위해 페이지가로드 된 후 JS에서 확인해야합니다. 다음과 같이

<style media="handheld, screen and (max-width:1023px)"> 
    body { margin-top: 0px } 
</style> 
<style media="screen and (min-width:1024px)"> 
    body { margin-top: 1px } 
</style>

를 첨부 JS :

html로는 다음과 같이 할 수

function onLoad() { 
    var head = document.getElementsByTagName('head')[0]; 
    var body = document.getElementsByTagName('body')[0]; 
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top'); 

    var script = document.createElement('script'); 
    script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js'); 
    head.appendChild(script); 
}

이 작업을 수행하지만, 단지 당 하중으로. 사용자가 브라우저 창 크기를 조정하는 데 반응하는 반응을 얻으려면 widow의 너비를 추적하고 필요할 때 페이지를 다시로드해야합니다.

출처

2013-04-26 19:34:18

2011 년부터 세계는 모바일 시대로 전환했습니다.

시도해보십시오 : document.documentElement.clientWidth은 페이지의 보이는 영역을 알려주므로 줌에 반응하지만 피치에 반응하지 않습니다.

출처

2014-02-27 20:27:05

브라우저 너비에 따라 다른 자바 스크립트 파일을 제공하는 방법

답변

관련 문제