KOMPOOS.NL

browser detection - php

home » php » browser.html

sitemap


voorbeeld van de browser detectie procedure

25.68 % robots robots
21.86 % chrome chrome
16.94 % googlebot googlebot
10.75 % firefox firefox
05.28 % safari safari
04.74 % ie-9 ie-9
03.83 % ie-8 ie-8
03.83 % bingbot bingbot
01.28 % mozilla mozilla
01.28 % ie-6 ie-6
01.09 % ie-7 ie-7
01.09 % mozilla-y mozilla-y
02.37 % overigen overige browsers

browsers van vandaag

uitleg php browser-detection procedure

Veel "web-guru's" zeggen dat je niets hebt aan het uitlezen van de browsers, omdat iedereen makkelijk een andere browser kan "faken". Nou, én? Wie zo 'slim' is om een website "op het verkeerde been te zetten" kon wel eens een "geklutste pagina" krijgen... Ik lig daar niet wakker van (en ik denk jij ook niet). Dit terzijde...

Wat een pagina (heel erg) kan vertragen zijn die leuke kleine .png-filetjes, die bijvoorbeeld hier op de pagina worden gebruikt. Er is een (javascript) lazy-load mechaniek aangebracht om dit te verhelpen. Voordat je deze module kunt gebruiken moet er natuurlijk eerst data verzameld zijn. Als voorbeeld geef ik de broncode van de "tel.php" die op deze site gebruikt wordt om "teller-data" te genereren (voor de voorbeelden). Om alles naar behoren te laten werken moet je de onderstaande stylesheet in de head-sectie van jouw pagina plaatsen, en de overige code (die dááronder staat) in de body-sectie van de pagina.

Om jou werk te besparen geef ik ook de op de pagina gebruikte .png-files. ie-5.png ie-6.png ie-7.png ie-8.png ie-9.png opera.png chrome.png safari.png firefox.png robots.png mozilla.png en overigen.png. Er zijn er nog veel meer. Alles wat "verschijnt" op deze pagina kan je krijgen door .png achter de omschrijving te zetten en te downloaden uit deze (http://kompoos.nl/php/) directory. Denk er aan om elke (nieuwe) .png-file ook even toe te voegen in de code van de php en het javascript.

stylesheet van de browser-detection procedure


<style type="text/css">
        img{
                background:inherit;
                color:#404040}
        .browser_naam,.overigen{
                padding:0 0px 0 10px;
                display:inline-block;
                color:#efefef;
                background:#404040;
                width:130px}
        .browser_naam{
                padding-bottom:4px;
                text-align:right}
        .witruimte{
                margin-left:8px}
        .overigen{
                font-size:smaller;
                text-align:right}
        .percentage{
                display:inline-block;
                background:#373737;
                color:#efefef;
                width:50px;
                padding-left:10px}
        #browser_detectie_container{
                padding:20px;
                display:block;
                color:#ffefef;
                background:#404040;
                width:300px}
        #browser_detectie_container img{
                position:relative;
                top:10px}
</style>

alle code die in de body-sectie moet komen


<div id="browser_detectie_container">
<?php
        $agent_array=array();
        $t=time();
        $f=date("Ymd",$t);
        $s="/home/HET-ABSOLUTE-PAD-NAAR/tel/".$f.".txt";
        if(file_exists($s)){
                $inhoud=(file($s));
                $telbruto=count($inhoud);
                $raw_useragent=array();
                for($i=0;$i<$telbruto;$i++){
                        $pos1=strpos($inhoud[$i],"|^|")+3;
                        $pos3=strpos($inhoud[$i],"|~|");
                        $pos2=($pos3-$pos1);
                        $useragent_capital=substr($inhoud[$i],$pos1,($pos2));
                        $useragent=strtolower($useragent_capital);
                        $browser = "";
                        if(strpos($useragent,"msie")){
                                $browser_version = "r";
                                if(preg_match('|msie ([0-9].[0-9]{1,2})|',$useragent,$matched)){
                                        $browser_version=substr($matched[1],0,1);
                                } 
                                $browser="ie-".$browser_version;
                        }
                        else if(strpos($useragent,"presto")){$browser="opera";}
                        else if(strpos($useragent,"chrome")){$browser="chrome";}
                        else if(strpos($useragent,"safari")){$browser="safari";}
                        else if(strpos($useragent,"firefox")){$browser="firefox";}
                        else if(preg_match('/(linguee|bot|dotnetdotcom|getleft|sitesucker|java|ossproxy|httrack)/i',$useragent)){$browser="robots";}
                        else if(strpos($useragent,"mozilla")){$browser="mozilla";}
                        else {$browser="overigen";}
                        array_push($agent_array,$browser);
                }
        }
        $array_waarden = array_count_values($agent_array);
        $een_procent = (count($agent_array)/100);
        $overigen = 0;
        arsort($array_waarden);
        foreach($array_waarden as $key => $val){
                if($key == "overigen"){
                        $overigen = $val;
                }
                else{
                        if(($val/$een_procent)<10){
                                $extra_nul = "0";}else{$extra_nul = "";
                        }       
                        echo "
                        <span class='percentage'>".$extra_nul. round($val/$een_procent,2)."</span> %  <img width='32' height='32' src='blank.gif' alt='".strtolower($key)."' class='witruimte' id='".strtolower($key)."' />
                        <span class='browser_naam'>$key</span>  <br />";
                }
        }
        if(($overigen/$een_procent)<10){
                $extra_nul = "0";}else{$extra_nul = "";
        }       
        echo "
                <span class='percentage'>".$extra_nul.round($overigen/$een_procent,2)."</span> %
                <img alt='overigen' width='32' height='32' id='overigen' class='witruimte' src='blank.gif' />
                <span class='overigen'>overige browsers</span><br /><br /><span class='overigen'>browsers van vandaag</span>";
?>
</div>
<script>
        function vertraag_browser_images(){
                if(document.getElementById("ie-5")){document.getElementById("ie-5").src="ie-5.png";}
                if(document.getElementById("ie-6")){document.getElementById("ie-6").src="ie-6.png";}
                if(document.getElementById("ie-7")){document.getElementById("ie-7").src="ie-7.png";}
                if(document.getElementById("ie-8")){document.getElementById("ie-8").src="ie-8.png";}
                if(document.getElementById("ie-9")){document.getElementById("ie-9").src="ie-9.png";}
                if(document.getElementById("opera")){document.getElementById("opera").src="opera.png";}
                if(document.getElementById("chrome")){document.getElementById("chrome").src="chrome.png";}
                if(document.getElementById("safari")){document.getElementById("safari").src="safari.png";}
                if(document.getElementById("firefox")){document.getElementById("firefox").src="firefox.png";}
                if(document.getElementById("robots")){document.getElementById("robots").src="robots.png";}
                if(document.getElementById("mozilla")){document.getElementById("mozilla").src="mozilla.png";}
                if(document.getElementById("overigen")){document.getElementById("overigen").src="overigen.png";}
        }
        setTimeout(function(){vertraag_browser_images();},1000);
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.