PC用とスマホ用で、読み込むJSを変えたい(画面サイズで条件分岐したい)。
やりたいこと
画面サイズ769px以上の場合のみ、head内でscroll.jsを読み込ませたい。
php
1<!Doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <title>sample site</title> 10 <link rel="stylesheet" href="reset.css" media="all"> 11 <link rel="stylesheet" href="common.css" media="all"> 12 <script src="jquery.js"></script> 13 <script> 14 var $win = $(window); 15 $win.on('load resize', function() { 16 var windowWidth = $win.width(); 17 if (windowWidth > 768) { 18 $('head').append('<script src="scroll.js"></script>'); 19 } else { 20 // スマホ用 21 } 22 }); 23 </script> 24</head> 25 26<body> 27・・・・ 28</body> 29
上記のように
php
1<script> 2 var $win = $(window); 3 $win.on('load resize', function() { 4 var windowWidth = $win.width(); 5 if (windowWidth > 768) { 6 $('head').append('<script src="scroll.js"></script>'); 7 } else { 8 // スマホ用 9 } 10 }); 11</script>
としましたが、うまく動きませんでした。
<script src="scroll.js"></script>
部分の記載方法が違うのかなと思い、調べてみたもののなかなか解決できなかったので、ご質問させていただきます。
●環境
HTML5、CSS3、jQuery v1.12.4
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー