パララックスのページを作成しているときにパララックスのjsが邪魔してたので、読み込まないようにする方法をまとめました。
ウィンドウサイズで読み込みJSの切り替え
レスポンシブサイトの制作時にPCで読み込んでいるjavascriptを変更したいときに使用するコード。
PCサイトでパララックスのページを制作していて、スマホ表示では真っ白になる現象が起きたので、調べるとでparallax.jsが悪さしてるみたい。そこでスマホ表示のとき、つまりブラウザのウィンドウサイズが649pxのときにはparallax.jsを読み込まないようにしました。
<script type="text/javascript">
jQuery(document).ready(function($) {
//PC環境の場合
if (window.matchMedia( '(min-width: 649px)' ).matches) { //切り替える画面サイズ
$.ajax({
url: '../js/parallax.js',
dataType: 'script',
cache: false
});
//モバイル環境の場合
} else {
$.ajax({
url: '',
dataType: 'script',
cache: false
});
};
});
</script>
ユーザーエージェントで読み込むjavascriptを切り替える方法
ウィンドウサイズだと、今度はiPadとの判別が難しくなるので、ユーザーエージェントで判別して読み込むjavascriptを切り替えるコードも書いときますね。
<script type="text/javascript">
$(function(){
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
$.ajax({
url: '読み込みたいスマホ用javascript',
dataType: 'script',
cache: false
});
}else{
$.ajax({
url: '読み込みたいPC用javascript',
dataType: 'script',
cache: false
});
}
});
</script>
