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

insrf1ej  于 2023-01-19  发布在  PHP
关注(0)|答案(6)|浏览(154)

我有一个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移动的脚本-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'); }
wtlkbnrh

wtlkbnrh1#

这不是一个你应该在服务器端解决的问题。这是一个CSS问题。在你的样式表中包含如下内容:

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

有关介质查询的详细信息,请查看this article

zqdjd7g9

zqdjd7g92#

如果你想做的只是使用不同的logo,那么css方法可能已经足够好了。
但是如果你想用PHP(或Java或.NET)来了解服务器上设备的性质,以便为不同的标记提供服务(或js或css文件)到不同的设备,那么你可能想看看WURFL,无线通用资源文件。我已经玩了一点。我不认为它得到屏幕大小或方向的权利,但它绝对可以识别我拥有的设备(iPhone、Nexus7、Kindle):
WURFL at Sourceforge.net

t5fffqht

t5fffqht3#

如果你想两全其美,你可以使用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/上获得更多文档。
如果你担心的只是图像的大小,你也可以使用他们的图像大小调整器,它会调整图像的大小,以最适合加载它的设备(取决于你如何配置它)。

tyu7yeag

tyu7yeag4#

为什么不让php生成一个小的logo/占位符,然后根据浏览器的大小使用javascript加载一个更大的版本。你甚至可以使用lazyload for jQuery(http://www.appelsiini.net/projects/lazyload)。你可以让它变得更高级,比如添加一个大小检测,这样人们在调整页面大小时就不必重新加载页面了。

iszxjhcz

iszxjhcz5#

function CurrentWidth() {
        $CurrentWidth = "<script> var mobilewidth = screen.width; if(mobilewidth < 1400){ document.write('smallDesktop'); }else{ document.write('largeDesktop'); } </script>";
        echo $CurrentWidth;
    }

// Please place CurrentWidth() function into your functions.php
//You can use your custom width instead of 1400
// Usage: echo CurrentWidth() return your value
// If you want find height, Please use screen.height;
// you received typeof as string(133) value, It's not working So please use above script in js. and make hide show class according to your condition.
o2gm4chl

o2gm4chl6#

使用jQuery时,它可能会像这样工作:

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

相关问题