1

私は2つの画像「image-big.jpg」と「image-small.jpg」を持っています。JavaScriptを介して画面幅<= 699かどうかを検出し、image-big.jpgからclass = "imageswap"で画像のSRCを変更したいimage-small.jpg に。

したがって、基本的に、ポータブル デバイス上にある場合は、小さい画像が表示されます。

私はせいぜいjavascsriptの初心者であり、どんな助けも感謝しています!

4

4 に答える 4

0

ウィンドウの onresize イベントにバインドします。

window.onresize = function(event) {
    if(window.innerWidth && window.innerWidth===699)
       document.getElementById('myImg').src = 'newSource';
    else if(document.body.offsetWidth && document.body.offsetWidth===669)
       document.getElementById('myImg').src = 'newSource';
};

これelse ifはIE < v.9用です

于 2012-06-27T17:57:17.620 に答える
0

仕様にはありませんがscreen、すべてのブラウザで正常に動作します。

if(screen.width <= 699){
   // do you logic
}
于 2012-06-27T17:58:50.753 に答える
0

1 番目のアプローチ: クライアント側。デバイスタイプの検出後、dom ready の html タグに classname を設定します。CSS を使用します。

html.big .image-div {background-image:url('big.jpg')}
html.small .image-div {background-image:url('small.jpg')}

2 番目のアプローチ: リダイレクト。2 つの異なる URL を使用し、User-Agent を検出して小さなサイズにリダイレクトします。ウィンドウ/画面の幅よりも User-Agent (ナビゲーター オブジェクト) を使用することをお勧めします

特定のデバイス用にカスタマイズできると、コードとページの外観が向上するため、通常はリダイレクトを好みます。それがリーダーの振る舞い方です。

于 2012-06-27T17:59:19.047 に答える