A way to determine browser width in PHP without ja

Question

First off is there one? Or would I have to use javascript? I'd like to be able to make changes to which CSS is used, so frex I could load smaller fonts for a mobile device, or whatever.

Answer 1

You will have to use JavaScript. The server knows nothing about highly client-side data like that. Fortunately, JavaScript can manipulate styles and style sheets quite easily, so it should be able to tackle your problem without even involving anything server-side.

In the case of mobile devices, another easy tool is setting the media type on a style sheet to handheld.

Answer 2

Take a look at WURFL.
As Ignacio Vazquez-Abrams suggested in his answer, it uses the user agent string to "guess" the resolution for known devices. If you're concerned about mobile devices that's probably as accurate as you can get without the help of a client-side script/app.

Answer 3

You can use $_SERVER['HTTP_USER_AGENT'] by using the following code:

Code:

//_______________DETECT DEVICES__________________//
$tablet_browser = 0;
$mobile_browser = 0;

if (preg_match('/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $tablet_browser++;
}

if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}

if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');

if (in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'opera mini') > 0) {
    $mobile_browser++;
    //Check for tablets on opera mini alternative headers
    $stock_ua = strtolower(isset($_SERVER['HTTP_X_OPERAMINI_PHONE_UA'])?$_SERVER['HTTP_X_OPERAMINI_PHONE_UA']:(isset($_SERVER['HTTP_DEVICE_STOCK_UA'])?$_SERVER['HTTP_DEVICE_STOCK_UA']:''));
    if (preg_match('/(tablet|ipad|playbook)|(android(?!.*mobile))/i', $stock_ua)) {
      $tablet_browser++;
    }
}

if ($tablet_browser > 0) {
   // do something for tablet devices
   print 'is tablet';
}
else if ($mobile_browser > 0) {
   // do something for mobile devices
   print 'is mobile';
}
else {
   // do something for everything else
   print 'is desktop';
}   
 //_______________END DETECTING DEVICES__________________//

Output

If tablet: 'is tablet'

If mobile: 'is mobile'

If desktop: 'is desktop'

Answer 4

There is no way to do this. If you want to detect what device is being used then you should examine $_SERVER['HTTP_USER_AGENT'] for clues.

Answer 5

You should look at Tera-WURFL, it is a PHP & MySQL-based software package that detects mobile devices and their capabilities. Here is the Tera-WURFL code that you would use to detect the browser width in PHP:

<?php
require_once("TeraWurfl.php");
$wurflObj = new TeraWurfl();
$wurflObj->GetDeviceCapabilitiesFromAgent();
$browser_width = $wurflObj->capabilities['display']['max_image_width'];
// You can also get the actual display resolution
$display_width = $wurflObj->capabilities['display']['resolution_width'];
?>    

Answer 6

The solution I have has actually worked real well for years now - no plugins, no classes. Basically, while outputting the HEAD part of the doc, I output some JavaScript that gets the browser width and writes it to a cookie. Then, later, further down the page, I simply read the cookie that has the exact width stored using the $_COOKIE function in php. It has not failed me once in any scenario.

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
       <script> 

        function setCookie(cname,cvalue,exdays) {
          var d = new Date();
          d.setTime(d.getTime()+(exdays*24*60*60*1000));
          var expires = "expires="+d.toGMTString();
          document.cookie = cname + "=" + cvalue + "; " + expires;
        }

        function window_height() {
           if (document.body) {
             winH = document.body.offsetHeight;
           }

          if (document.compatMode=='CSS1Compat' &&
             document.documentElement &&
             document.documentElement.offsetHeight ) {
             winH = document.documentElement.offsetHeight;
             return winH
          }

         if (window.innerHeight && window.innerHeight) {
            winH = window.innerHeight;
            return winH;
         }
      }     

      function window_width() {
        if (document.body) {
          winW = document.body.offsetWidth;
        }

       if (document.compatMode=='CSS1Compat' &&
          document.documentElement &&
          document.documentElement.offsetWidth ) {
          winW = document.documentElement.offsetWidth;
          return winW
       }

       if (window.innerWidth && window.innerWidth) {
         winW = window.innerWidth;
         return winW;
       }
     }      
       /* Upon page load, get the page width and height, and store in a JSON object/Cookie */
       setTimeout(function(){
         setCookie('w_w',JSON.stringify({'width':window_width(),'height':window_height()}))
       })

     </script>
    </head>
    <body>
      <?
        /* .........your PHP code...........*/
        /* .........your PHP code...........*/
        /* Access precise window dimensions */
        $xy=json_decode($_COOKIE['w_w']);
        $width=$xy->width;
        $height=$xy->height;
      ?>
     </body>
   </html>