0

私はこのようなWordpressのheader.phpページを持っています...

<?php if( is_home() || is_front_page() ) : ?>
<img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="logo"
width="206" height="136" border="0" class="logo" />

<?php else : ?>

<img src="<?php bloginfo('template_directory'); ?>/images/logo_inner.png"
alt="logo" width="187" height="130" border="0" class="logo" />

<?php endif; ?>

そのため、現在のページがホームページでない場合は、別のロゴが使用されます。

モバイルで別のロゴを使用したいので、ブラウザのサイズを検出するために「if」セクションにコードを追加できるかどうかを知りたいです。私はあなたがJqueryを使ってこれを行うことができることを知っています例えば

if ((screen.width<=420)) {
 //do something
}
else {
//do something else
}

そして、Detect Mobileスクリプトを使用してみました -http：//detectmobilebrowsers.com/ロゴを置き換えることを望んでいますが、phpコードがjQueryコードをオーバーライドします。

if(jQuery.browser.mobile==true){ 
   jQuery('.logo').attr('src','.../images/mobile_logo.png');
} else { 
   jQuery('.logo').attr('src','../images/logo.png'); }
4

5 に答える 5

5

これは、サーバー側で対処する必要がある問題ではありません。これは CSS の問題です。スタイルシートに次のようなものを含めます。

@media all and (max-width: 699px) {
  /* mobile styles here */
}

メディア クエリの詳細については、この記事を確認してください。

于 2013-01-17T21:22:42.280 に答える
0

jQuery を使用すると、次のように動作します。

$(function(){
    var width = $(window).width();
    if (width < 599) {
        // change your image.
    }
});
于 2013-01-17T21:22:22.897 に答える