レスポンシブサイトでスクロールバーを含むウィンドウサイズで挙動を切り替えたい（ie8含む）

Question

レスポンシブサイトでスクロールバーを含むウィンドウサイズで動作を挙動を切り替えたいです。

cssではメディアクエリを使用して対応しているので
スクロールバーを含むウィンドウサイズで切り替える必要があるかと思うのですが、
window.innerWidth は ie8 に対応していないため
ie8 で対応できるよう下記のようなソースに書き換えて対応しました。

しかし、こちらに書き換えたらリサイズ時の切り替えができなくなってしまいました。

どのようにしたらリサイズ時にも対応できるようになるでしょうか。

$(function(){
	var minWidth = 768;
	var wWidth = window.innerWidth ? window.innerWidth : $(document).width();
	$(window).resize(function(){
		if (minWidth <= wWidth) {
			$('.js_autoheight').removeAttr('style');
			$('.js_autoheight').autoHeight({height : 'height'});
		}
		else {
			$('.js_autoheight').removeAttr('style');
		}
	}).trigger('resize');
});

$(function() {
	var $elem = $('.js-image-switch');
	var sp = '_sp.';
	var pc = '_pc.';
	var replaceWidth = 768;
	var wWidth = window.innerWidth ? window.innerWidth : $(document).width();

	function imageSwitch() {
		var windowWidth = parseInt(wWidth);
		$elem.each(function() {
			var $this = $(this);
			if(windowWidth >= replaceWidth) {
				$this.attr('src', $this.attr('src').replace(sp, pc));

			} else {
				$this.attr('src', $this.attr('src').replace(pc, sp));
			}
		});
	}
	imageSwitch();

	var resizeTimer;
	$(window).on('resize', function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
			imageSwitch();
		}, 200);
	});
});

何卒よろしくお願いいたします。

Comments

[m.ts10806]

ie8環境が手元にないので確認できませんが、ie8環境または別環境でエラーは出ていませんか？ie8の判定をuserAgentから判断させるように書き換えてみてはどうでしょうか？

[groco]

せっかくアドバイスをいただいたにも関わらず、諸事情により連絡が遅くなってしまい申し訳ございません。。。ie8でも他のブラウザでもエラーは出ていないようでした。アドバイスいただいた「ie8の判定をuserAgentから判断させるように」という方法を一度試してみたいと思います！

Answer 1

$(function(){
    var minWidth = 768;
    var wWidth = window.innerWidth ? window.innerWidth : $(document).width();
    $(window).resize(function(){
        if (minWidth <= wWidth) {
            ...

としてしまうと、wWidthの値は、$(function())の実行時、すなわち、ドキュメント読み込み時に一度代入されるだけになってしまいますね。よって、ドキュメント読み込み時のウィンドウサイズがその後の判定でもずっと使われてしまうため、リサイズしても切り替えが効かないのだと思います。

目的は、ウィンドウのリサイズ時にその時点でのサイズに応じて挙動を変えることですので、$(window).resize(function())の中でサイズをチェックするとよいのではと思います。例えば、

$(function(){
    var minWidth = 768;
    $(window).resize(function(){
        var wWidth = window.innerWidth ? window.innerWidth : $(document).width();
        if (minWidth <= wWidth) {
            ...

でしょうか。

後半の部分も同様で、例えば、実際にサイズに応じて切り替えを行うimageSwitch関数の中でサイズを取得すれば良いので、

$(function() {
    var $elem = $('.js-image-switch');
    var sp = '_sp.';
    var pc = '_pc.';
    var replaceWidth = 768;

    function imageSwitch() {
        var wWidth = window.innerWidth ? window.innerWidth : $(document).width();
        var windowWidth = parseInt(wWidth);
        ...

のようにすると良いのではと思います。

Comments

[groco]

せっかく回答をいただいたにも関わらず、諸事情により連絡が遅くなってしまい申し訳ございません。。。
教えていただいた通り修正したところ、無事に動く事が確認できました！
詳しく説明もつけていただきありがとうございます。
確かにご指摘いただいた通り、ウィンドウサイズの取得を完了した後にリサイズの記述をしているので、リサイズしても反応しませんよね。。。
今後は記述の順番にも注意したいと思います。
ありがとうございました！