Question

我有一个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'); }

Answer 1

这不应该是服务器端的问题。这是一个CSS问题。在样式表中包含以下内容：

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

检查this article以获取有关媒体查询的更多信息。

Answer 2

如果您只想使用不同的徽标，那么css方法可能就足够了。

但是，如果您想使用PHP（或Java或.NET）来了解服务器上设备的性质，以便为不同的设备提供不同的标记（或js或css文件），那么你可能想看看无线通用资源文件WURFL。我一直在玩它。我认为它没有正确的屏幕尺寸或方向，但它绝对可以识别我拥有的设备（iPhone，nexus7和kindle）：

WURFL at Sourceforge.net

Answer 3

如果你想要两全其美，你可以使用WURFL和Javascript来显示和隐藏图像。

以下是一个例子：

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

if(WURFL.is_mobile){
    jQuery('.logo').attr('src','.../images/mobile_logo.png');
} else {
    jQuery('.logo').attr('src','../images/logo.png');
}

这是由ScientiaMobile（WURFL）提供的云服务，它正在进行服务器端检测并返回带有设备信息的JSON对象。如果您愿意，可以在http://wurfl.io/获得更多文档。

如果它只是你担心的图像大小，你也可以使用它们的图像缩放器，它会调整图像的大小以最好地适应加载它的设备（取决于你如何配置它）。 / p>

Answer 4

使用jQuery可能会这样：

$(function(){
    var width = $(window).width();
    if (width < 599) {
        // change your image.
    }
});

Answer 5

为什么不让php生成一个小徽标/占位符，然后根据您的浏览器大小使用javascript加载更大的版本。您甚至可以使用类似lazyload的jQuery（http://www.appelsiini.net/projects/lazyload）。您可以将其设置为高级，例如添加调整大小检测，以便人们在调整页面大小时不必重新加载页面。

如何使用PHP检测浏览器大小

5 个答案: