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

I have a Wordpress header.php page which looks like this...

<?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; ?>

so when the current page is not the home page a different logo is used.

I want to know if it is possible to add some code in the 'if' section to detect the browser size because I want to use a different logo on mobile. I know you can do this using Jquery e.g.

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

and I've tried using Detect Mobile script - http://detectmobilebrowsers.com/ hoping to replace the logo but the php code overrides the jQuery code.

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

With jQuery it might work like this:

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

This isn't a problem you should address server-side. This is a CSS issue. Include something like the following in your stylesheet(s):

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

Check this article for more information on media queries.

If all you want to do is use a different logo, the css approach is probably good enough.

However, if you'd like to use PHP (or Java or .NET) to learn about the nature of the device at the server, so as to serve different markup (or js or css files) to different devices, then you may want to take a look at WURFL, the Wireless Universal Resource File. I've been playing around with it a little. I don't think it gets the screen sizes or orientations right, but it can definitely identify the devices I have (iPhone, nexus7, and kindle):

WURFL at Sourceforge.net

If you would like the best of both worlds you can use WURFL with Javascript to show and hide the image.

Here is an example:

<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');
}

This is a cloud service offered by ScientiaMobile (WURFL) that is doing server side detection and returning a JSON object with the device information. If you want, more of their documentation is available at http://wurfl.io/.

If it is only the size of the image that you are worried about, you could also use their image resizer, which will resize the image to best suite the device that is loading it (depending on how you configure it).

why not make the php generate a small logo/placeholder and then use javascript to load a bigger version depending on your browser size. You could even use something like lazyload for jQuery (http://www.appelsiini.net/projects/lazyload). You can make it as advanced as you like, like adding a resize detection so people don't have to reload the page when they resize it.