ワードプレスでデスクトップの幅を取得

Question

私は、メインページのスライダーでWPで構築されたWebサイトを持っています。スライダー上の各スライドには、サーバーに保管されている背景イメージへのパスがあります。スライド1については、/images/slide1.jpgです。

/images/slide1-wide.jpgをデスクトップの幅> 1400pxに置き換えます。

パストゥーイメージはデータベースから動的に評価されるため、CSSはオプションではありません。

ウィンドウ幅を確認するjsを追加しましたが、イメージがロードされた後に動作します。私が達成できる唯一のことは元のイメージを描き、それを再描画することでした。ユーザーの視点から見ると、それはひどいです（悪いイメージ→点滅→正しいイメージ）。

私は51度のプラグインを試しましたが、モバイルデバイスを検出することしかできませんでした。

メインページの描画中にサーバー側でウィンドウの幅を取得するにはどうすればよいですか？

Answer 1

画像が表示される前に、このスクリプトで画像を選択できます。 したがって、ユーザーには「不良画像」は表示されません。

<script> 
$(function(){ 
width = $(window).width(); 
alert(width); 
if (width > 1400) { 
$('#divimg').html("<img src='/images/slide1-wide.jpg'>"); 
} 
else { 
$('#divimg').html("<img src='/images/slide1.jpg'>"); 
} 
}) 
</script> 
<div id="divimg"></div>