채택완료
반응형에서 모니터 사이즈에 따라 js 파일을 다르게 불러들일수도 있나요?
pc에서 필요한 특정 js 파일때문에 모바일에서 햄버거메뉴(슬라이드 메뉴)가 열리질 않는데요.
js를 볼줄을 몰라서 수정이 어렵고 js파일 자체를 구분해서 불러올 방법이 없는지 찾는중인데 혹시 그런게 가능한가요?
pc에선 a.js를 불러들이고 특정사이즈 이하 화면에선 b.js를 불러들이는 방법이 있는지 궁금합니다
|
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
마르스컴퍼니
2020-03-11 (수) 20:20:04
그누보드의 G5_IS_MOBILE 상수를 활용할 수 있습니다.
<?php if (G5_IS_MOBILE) { ?>
<script src="mobile.js"></script>
<?php } else { ?>
<script src="pc.js"></script>
<?php } ?>
다만 위 코드는 화면 너비 기준이 아닌.. 접속 기기 기준입니다.
화면 너비에 따른 스크립트 로드는 다음의 글을 참고해 볼 수 있습니다.
답변에 대한 댓글 2개
blue4u
2020-03-11 (수) 21:05:41
마르스컴퍼니
2020-03-11 (수) 22:33:44
https://stackoverflow.com/a/4811342
https://stackoverflow.com/a/23438659
참고요.
jquery 기반이라 jquery 가 로드되어야 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
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);
</script>
https://stackoverflow.com/a/23438659
참고요.
jquery 기반이라 jquery 가 로드되어야 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
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);
</script>
blue4u
2020-03-11 (수) 23:20:02
알려주셔서 감사드립니다.^^
답변을 작성하려면 로그인이 필요합니다.
샘플용이라 그누를 깔기전에 작업물 보여주는 용도거든요.ㅠㅠ