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 回答
2

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

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

Sourceforge.net 上的 WURFL

于 2014-07-23T16:07:45.587 回答
1

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

这是一个例子：

<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/获得更多他们的文档。

如果您只担心图像的大小，您还可以使用他们的图像调整器，它将调整图像的大小以最适合正在加载它的设备（取决于您如何配置它）。

于 2014-07-30T02:01:34.800 回答
0

使用 jQuery，它可能会像这样工作：

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

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

于 2014-11-28T13:16:46.780 回答