반응 형 자바 스크립트 파일?

Question

jQuery Mobile UI를 사용하여 모바일 사이트를 구축했지만 이제는 데스크톱 사이트에서 날짜 표시기 날짜가 더 길어야한다는 등 일부 기능이 필요하다는 것을 알고 있습니다.

저는 Modernizr과 matchMedia를 통해 별도의 js 파일을로드하는 데 도움을주었습니다. 그러나 응답 할 수있는 좋은 방법을 찾지 못했습니다. Modernizr은 초기로드시에 (문서에서 내용을 빠뜨린 경우 제외) 작동하며 matchMedia가 최소/최대 너비 임계 값을 초과하여 여러 번 실행하는 데 문제가 있습니다. 때로는 작동하지만 별도의 js 파일을 추가/제거하는 데 문제가 있습니다. 그 위에 (큰 문제는 아니지만 - 저는 생각하지 않습니다), 다른 스크립트에서 스크립트를 DOM에로드 할 때 Chrome이 오류를 발생시킵니다.

하나의 js 파일을 작성한 다음 $.mobile.media("screen and (min-width: XXXpx)")과 같은 청취자를 본문의 너비에 추가하여 필요한 값을 변경하는 것이 가장 좋을까요?

HTTP 요청 및 사이트 크기를 가능한 한 작게 유지하려고하기 때문에 나 자신을 위해 너무 어렵게 만들었거나 명백한 내용이 누락되었을 수 있지만이를 위해 좋은 해결책을 찾지 못했습니다.

감사합니다.

번개 라운드 보너스 질문 : 그것은 적절한/연습 좋은 바탕 화면 사이트로 전환 한 후 jQuery를 모바일 스타일링 (data-roledata-iddata-theme)을 모두 유지하는 것입니다? 그것은 엄청나게 보인다. 누군가 큰 화면에서만 그것을 보는 사람에게는 끔찍하다.

Answer 1

IMHO, 가장 좋은 방법은 "isMobile", "isTablet"또는 "isDesktop"과 같이 자바 스크립트에 몇 가지 플래그를 삽입하는 것입니다.이 플래그는 사용자의 "pageinit"이벤트에 첨부 된 메서드 내에서 설정됩니다. webapp. 나중에 코드의 특정 부분에서 적절한 버전으로 플래그가 작동하는지 확인할 수 있습니다.

플래그를 확인할 수있는 방법은 아키텍처에 따라 다릅니다. 현재 작업하고있는 프로젝트에서 백엔드가 페이지의 본문에 첨부 한 클래스에서 해당 정보를 추출하지만 그 이유는 해당 정보가 있기 때문입니다. Harvey과 같은 라이브러리를 사용하여 트리거 될 미디어 쿼리를 관찰하고 이에 따라 플래그를 설정할 수 있습니다. 귀하의 옵션이 여기에서 끝나지 않는다고 생각하지만, 더 이상 당신을 도울 수는 없습니다.