レスポンシブサイトでスクロールバーを含むウィンドウサイズで動作を挙動を切り替えたいです。
cssではメディアクエリを使用して対応しているので
スクロールバーを含むウィンドウサイズで切り替える必要があるかと思うのですが、
window.innerWidth は ie8 に対応していないため
ie8 で対応できるよう下記のようなソースに書き換えて対応しました。
しかし、こちらに書き換えたらリサイズ時の切り替えができなくなってしまいました。
どのようにしたらリサイズ時にも対応できるようになるでしょうか。
javascript
1$(function(){ 2 var minWidth = 768; 3 var wWidth = window.innerWidth ? window.innerWidth : $(document).width(); 4 $(window).resize(function(){ 5 if (minWidth <= wWidth) { 6 $('.js_autoheight').removeAttr('style'); 7 $('.js_autoheight').autoHeight({height : 'height'}); 8 } 9 else { 10 $('.js_autoheight').removeAttr('style'); 11 } 12 }).trigger('resize'); 13}); 14 15$(function() { 16 var $elem = $('.js-image-switch'); 17 var sp = '_sp.'; 18 var pc = '_pc.'; 19 var replaceWidth = 768; 20 var wWidth = window.innerWidth ? window.innerWidth : $(document).width(); 21 22 function imageSwitch() { 23 var windowWidth = parseInt(wWidth); 24 $elem.each(function() { 25 var $this = $(this); 26 if(windowWidth >= replaceWidth) { 27 $this.attr('src', $this.attr('src').replace(sp, pc)); 28 29 } else { 30 $this.attr('src', $this.attr('src').replace(pc, sp)); 31 } 32 }); 33 } 34 imageSwitch(); 35 36 var resizeTimer; 37 $(window).on('resize', function() { 38 clearTimeout(resizeTimer); 39 resizeTimer = setTimeout(function() { 40 imageSwitch(); 41 }, 200); 42 }); 43});
何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー