2

私は困惑しています...大きな画面にのみ大きなグラフィックをロードするレスポンシブサイトを構築しています。IE9 / FF / Chromeではうまく機能しますが、IE8では機能しません。

IE8が起動しない理由を誰かが知っていますか？これが私のコードです：

<script type="text/javascript">
$(document).ready(function() {
   $(window).resize(function() {
    //small-screen
    if (window.innerWidth < 768) {$('#smiling-model').html('');}
    //end small-screen
    else if (window.innerWidth >= 768) {
        $('#smiling-model:empty').append('<img id="#smiling-model-img" src="images/smiling-model-500x456px.jpg" alt="Great Smile" />');
            }
    }).resize(); // trigger resize event
});
</script>

実際のサイトへのリンクは次のとおりです： http ：//www.orlickdental.com/

皆さんありがとう！

オマール

4

5 に答える 5

3

私の知る限り、window.innerWidthバージョン 9 未満の Internet Explorer ではサポートされていません。

詳細については、古き良き Quirksmode が提供するこのDOM 互換性情報を確認してください :)

すでに jQuery を使用しているため、信頼できます$(window).width()。しかし、知識の精神では、ウィンドウの寸法を把握することは常に IE の問題でした。これを行う主な方法は、body 要素の寸法(body.clientWidth を使用)に依存するか、css で設計された特定のものを実際に挿入しdivてウィンドウの寸法を埋める(そしてその要素から寸法を読み取る) ことでした。jQuery は明らかに、それからすべての楽しみを奪います ;)

于 2012-08-27T21:44:34.870 に答える
1

を使用しますが、 jQuery 1.8（幅を返す）の$(window).width()変更により、ページがクァークズモードでレンダリングされないようにしてください。IE0

簡単な答え：<!DOCTYPE html>ページの最初に使用します。

于 2012-08-28T10:07:10.800 に答える
0

どうですか$(this).width()：

$(window).resize(function() {
    //small-screen
    var w = $(this).width();
    if (w < 768) {
       $('#smiling-model').html('');
    }
    //end small-screen
    else if (w >= 768) {
        $('#smiling-model:empty').append('<img id="#smiling-model-img" src="images/smiling-model-500x456px.jpg" alt="Great Smile" />');
    }
 }).resize(); // trigger resize event
于 2012-08-27T21:43:08.183 に答える
0

IE8 のコンソールでwindow.innerWidth値を確認したところ、 undefined.

代わりに使用$(window).width();

于 2012-08-27T21:48:37.670 に答える
0

ブラウザの互換性のために$(window).width()、window.innerWidth.

$(document).ready(function() {
   $(window).resize(function() {

    //cache the width of the viewport
    var width = $(window).width();

    //and check it's value
    if (width < 768) {$('#smiling-model').html('');}
    //end small-screen
    else if (width >= 768) {
        $('#smiling-model:empty').append('<img id="#smiling-model-img" src="images/smiling-model-500x456px.jpg" alt="Great Smile" />');
            }
    }).resize(); // trigger resize event
});

ここにデモがあります：http://jsfiddle.net/FpReh/

于 2012-08-27T21:45:54.180 に答える