Un moyen de déterminer la largeur du navigateur en PHP sans javascript?

Question

Tout d'abord est-il un? Ou devrais-je utiliser javascript? Je voudrais être en mesure d'apporter des modifications à quel CSS est utilisé, afin que je puisse charger des polices plus petites pour un appareil mobile, ou autre.

Answer 1

Il n'y a aucun moyen de le faire. Si vous voulez détecter quel périphérique est utilisé, vous devez examiner $_SERVER['HTTP_USER_AGENT'] pour trouver des indices.

Answer 2

Malheureusement, il n'existe aucun moyen de détecter la résolution des utilisateurs avec PHP uniquement. Si vous utilisez Javascript, vous pouvez définir cette valeur dans un cookie, et toutes les requêtes suivantes pourraient vérifier la valeur de ce cookie. Cela semble être une méthode assez populaire pour ceux qui travaillent avec ce problème.

Vous pouvez également exécuter un petit javascript à partir de la page qui vérifie si un cookie de résolution est défini. Si ce n'est pas le cas, il envoie une requête asynchrone au serveur contenant la résolution d'écran. Le serveur détermine quel fichier CSS utiliser avec cette valeur et renvoie son chemin au javascript. Un cookie est alors défini pour indiquer que la résolution a été déterminée, et le fichier css est ensuite chargé (via javascript) dans la page. Toutes les demandes futures cesseront de supposer qu'elles dépendent du cookie de résolution.

Answer 3

Tout ce que vous pouvez faire est de détecter le modèle du navigateur. De là, vous pouvez faire correspondre les navigateurs mobiles courants (les iPhones inscrivent tous l'iPhone dans la chaîne useragent) et charger les polices plus petites par défaut et ajuster à partir de là.

Answer 4

Cela peut être utile si vous ne voulez pas utiliser un JavaScript:

http://www.w3.org/TR/CSS2/media.html#media-types

Answer 5

Jetez un oeil à WURFL.
Comme Ignacio Vazquez-Abrams l'a suggéré dans sa réponse, il utilise la chaîne de l'agent utilisateur pour "deviner" la résolution des périphériques connus. Si vous êtes préoccupé par les appareils mobiles, c'est probablement aussi précis que possible sans l'aide d'un script/application côté client.

Answer 6

Vous devez utiliser JavaScript. Le serveur ne sait rien sur les données hautement client comme ça. Heureusement, JavaScript peut manipuler les styles et les feuilles de style assez facilement, il devrait donc être capable de résoudre votre problème sans même impliquer quelque chose du côté serveur.

Dans le cas des périphériques mobiles, un autre outil simple permet de définir le type de support sur une feuille de style sur l'ordinateur de poche.

Answer 7

Vous devriez regarder Tera-WURFL, il s'agit d'un logiciel basé sur MySQL PHP & qui détecte les appareils mobiles et leurs capacités. Voici le code Tera-WURFL que vous utilisez pour détecter la largeur du navigateur en 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 8

La meilleure façon de le faire est d'utiliser CSS avec les types de médias

Ici, je vous donne un exemple pour ce que vous voulez, c.-à-d., il adapte la taille des polices pour de nombreux tags, et l'orientation divs [1,2,3] (horizontal ou vertical), selon la largeur des navigateurs

Je utilise ici la balise 'p5' avec une police plus grande que 'p4'

l'utilise de préférence dans un fichier de style externe css

/*default size*/  
nobr{ white-space:nowrap; } 

p5 {font-size:350%;} 
p4 {font-size:95%;} 

#container {width: 100%; display:block; overflow:auto; } 

#div1{ 
    float: left; 
    width: 20%; 
    text-align: center; 
} 

#div2{ 
    float: left; 
    width: 60%; 
    text-align: center; 
    display:block; overflow:auto; 
} 

#div3{ 
    float: left; 
    width: 20%; 
    text-align: center; 
    display:block; overflow:auto; 
} 

/*when the browsers width is between 500 and 700 pixels*/ 
@media screen and (max-width:700px) and (min-width:500px){ 
    p5 {font-size:200%;} 
    p4 {font-size:90%;} 

    #container { width: 100%; display:block; overflow:auto; } 
    #main_div {border:solid 2px black;padding:15px} 

    #div1{ 
     float: none; 
     width: auto; 
     text-align: center; 
    } 

    #div2{ 
     float: none; 
     width: auto; 
     margin: 0; 
     text-align: center; 
     display:block; overflow:auto; 
    } 

    #div3{ 
     float: none; 
     width: auto; 
     margin: 0; 
     text-align: center; 
    } 
} 

/*when the browsers width is less than 500 pixels*/ 
@media screen and (max-width:500px){ 
    p5 {font-size:150%;} 
    p4 {font-size:85%;} 

    #main_div {border:none;padding:0px} 
    #container { width: 100%; display:block; overflow:auto; } 

    #div1{ 
     float: none; 
     width: auto; 
     text-align: center; 
    } 

    #div2{ 
     float: none; 
     width: auto; 
     margin: 0; 
     text-align: center; 
     display:block; overflow:auto; 
    } 

    #div3{ 
     float: none; 
     width: auto; 
     margin: 0; 
     text-align: center; 
    } 
} 

Answer 9

Astuce pur HTML et CSS pour obtenir la largeur de l'affichage.Cela vous permettra d'atteindre 10 pixels. Il met en évidence en rouge jusqu'à la largeur d'affichage. Le premier noir sur le numéro blanc doit être la largeur d'affichage:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Dart Foods</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
<STYLE type="text/css"> 
hr {background-color: red;border: 1px solid blue;} 
@media (max-width: 1920px) {#d1920{background-color: red;}} 
@media (max-width: 1910px) {#d1910{background-color: red;}} 
@media (max-width: 1900px) {#d1900{background-color: red;}} 
@media (max-width: 1890px) {#d1890{background-color: red;}} 
@media (max-width: 1880px) {#d1880{background-color: red;}} 
@media (max-width: 1870px) {#d1870{background-color: red;}} 
@media (max-width: 1860px) {#d1860{background-color: red;}} 
@media (max-width: 1850px) {#d1850{background-color: red;}} 
@media (max-width: 1840px) {#d1840{background-color: red;}} 
@media (max-width: 1830px) {#d1830{background-color: red;}} 
@media (max-width: 1820px) {#d1820{background-color: red;}} 
@media (max-width: 1810px) {#d1810{background-color: red;}} 
@media (max-width: 1800px) {#d1800{background-color: red;}} 
@media (max-width: 1790px) {#d1790{background-color: red;}} 
@media (max-width: 1780px) {#d1780{background-color: red;}} 
@media (max-width: 1770px) {#d1770{background-color: red;}} 
@media (max-width: 1760px) {#d1760{background-color: red;}} 
@media (max-width: 1750px) {#d1750{background-color: red;}} 
@media (max-width: 1740px) {#d1740{background-color: red;}} 
@media (max-width: 1730px) {#d1730{background-color: red;}} 
@media (max-width: 1720px) {#d1720{background-color: red;}} 
@media (max-width: 1710px) {#d1710{background-color: red;}} 
@media (max-width: 1700px) {#d1700{background-color: red;}} 
@media (max-width: 1690px) {#d1690{background-color: red;}} 
@media (max-width: 1680px) {#d1680{background-color: red;}} 
@media (max-width: 1670px) {#d1670{background-color: red;}} 
@media (max-width: 1660px) {#d1660{background-color: red;}} 
@media (max-width: 1650px) {#d1650{background-color: red;}} 
@media (max-width: 1640px) {#d1640{background-color: red;}} 
@media (max-width: 1630px) {#d1630{background-color: red;}} 
@media (max-width: 1620px) {#d1620{background-color: red;}} 
@media (max-width: 1610px) {#d1610{background-color: red;}} 
@media (max-width: 1600px) {#d1600{background-color: red;}} 
@media (max-width: 1590px) {#d1590{background-color: red;}} 
@media (max-width: 1580px) {#d1580{background-color: red;}} 
@media (max-width: 1570px) {#d1570{background-color: red;}} 
@media (max-width: 1560px) {#d1560{background-color: red;}} 
@media (max-width: 1550px) {#d1550{background-color: red;}} 
@media (max-width: 1540px) {#d1540{background-color: red;}} 
@media (max-width: 1530px) {#d1530{background-color: red;}} 
@media (max-width: 1520px) {#d1520{background-color: red;}} 
@media (max-width: 1510px) {#d1510{background-color: red;}} 
@media (max-width: 1500px) {#d1500{background-color: red;}} 
@media (max-width: 1490px) {#d1490{background-color: red;}} 
@media (max-width: 1480px) {#d1480{background-color: red;}} 
@media (max-width: 1470px) {#d1470{background-color: red;}} 
@media (max-width: 1460px) {#d1460{background-color: red;}} 
@media (max-width: 1450px) {#d1450{background-color: red;}} 
@media (max-width: 1440px) {#d1440{background-color: red;}} 
@media (max-width: 1430px) {#d1430{background-color: red;}} 
@media (max-width: 1420px) {#d1420{background-color: red;}} 
@media (max-width: 1410px) {#d1410{background-color: red;}} 
@media (max-width: 1400px) {#d1400{background-color: red;}} 
@media (max-width: 1390px) {#d1390{background-color: red;}} 
@media (max-width: 1380px) {#d1380{background-color: red;}} 
@media (max-width: 1370px) {#d1370{background-color: red;}} 
@media (max-width: 1360px) {#d1360{background-color: red;}} 
@media (max-width: 1350px) {#d1350{background-color: red;}} 
@media (max-width: 1340px) {#d1340{background-color: red;}} 
@media (max-width: 1330px) {#d1330{background-color: red;}} 
@media (max-width: 1320px) {#d1320{background-color: red;}} 
@media (max-width: 1310px) {#d1310{background-color: red;}} 
@media (max-width: 1300px) {#d1300{background-color: red;}} 
@media (max-width: 1290px) {#d1290{background-color: red;}} 
@media (max-width: 1280px) {#d1280{background-color: red;}} 
@media (max-width: 1270px) {#d1270{background-color: red;}} 
@media (max-width: 1260px) {#d1260{background-color: red;}} 
@media (max-width: 1250px) {#d1250{background-color: red;}} 
@media (max-width: 1240px) {#d1240{background-color: red;}} 
@media (max-width: 1230px) {#d1230{background-color: red;}} 
@media (max-width: 1220px) {#d1220{background-color: red;}} 
@media (max-width: 1210px) {#d1210{background-color: red;}} 
@media (max-width: 1200px) {#d1200{background-color: red;}} 
@media (max-width: 1190px) {#d1190{background-color: red;}} 
@media (max-width: 1180px) {#d1180{background-color: red;}} 
@media (max-width: 1170px) {#d1170{background-color: red;}} 
@media (max-width: 1160px) {#d1160{background-color: red;}} 
@media (max-width: 1150px) {#d1150{background-color: red;}} 
@media (max-width: 1140px) {#d1140{background-color: red;}} 
@media (max-width: 1130px) {#d1130{background-color: red;}} 
@media (max-width: 1120px) {#d1120{background-color: red;}} 
@media (max-width: 1110px) {#d1110{background-color: red;}} 
@media (max-width: 1100px) {#d1100{background-color: red;}} 
@media (max-width: 1090px) {#d1090{background-color: red;}} 
@media (max-width: 1080px) {#d1080{background-color: red;}} 
@media (max-width: 1070px) {#d1070{background-color: red;}} 
@media (max-width: 1060px) {#d1060{background-color: red;}} 
@media (max-width: 1050px) {#d1050{background-color: red;}} 
@media (max-width: 1040px) {#d1040{background-color: red;}} 
@media (max-width: 1030px) {#d1030{background-color: red;}} 
@media (max-width: 1020px) {#d1020{background-color: red;}} 
@media (max-width: 1010px) {#d1010{background-color: red;}} 
@media (max-width: 1000px) {#d1000{background-color: red;}} 
@media (max-width: 990px) {#d990{background-color: red;}} 
@media (max-width: 980px) {#d980{background-color: red;}} 
@media (max-width: 970px) {#d970{background-color: red;}} 
@media (max-width: 960px) {#d960{background-color: red;}} 
@media (max-width: 950px) {#d950{background-color: red;}} 
@media (max-width: 940px) {#d940{background-color: red;}} 
@media (max-width: 930px) {#d930{background-color: red;}} 
@media (max-width: 920px) {#d920{background-color: red;}} 
@media (max-width: 910px) {#d910{background-color: red;}} 
@media (max-width: 900px) {#d900{background-color: red;}} 
@media (max-width: 890px) {#d890{background-color: red;}} 
@media (max-width: 880px) {#d880{background-color: red;}} 
@media (max-width: 870px) {#d870{background-color: red;}} 
@media (max-width: 860px) {#d860{background-color: red;}} 
@media (max-width: 850px) {#d850{background-color: red;}} 
@media (max-width: 840px) {#d840{background-color: red;}} 
@media (max-width: 830px) {#d830{background-color: red;}} 
@media (max-width: 820px) {#d820{background-color: red;}} 
@media (max-width: 810px) {#d810{background-color: red;}} 
@media (max-width: 800px) {#d800{background-color: red;}} 
@media (max-width: 790px) {#d790{background-color: red;}} 
@media (max-width: 780px) {#d780{background-color: red;}} 
@media (max-width: 770px) {#d770{background-color: red;}} 
@media (max-width: 760px) {#d760{background-color: red;}} 
@media (max-width: 750px) {#d750{background-color: red;}} 
@media (max-width: 740px) {#d740{background-color: red;}} 
@media (max-width: 730px) {#d730{background-color: red;}} 
@media (max-width: 720px) {#d720{background-color: red;}} 
@media (max-width: 710px) {#d710{background-color: red;}} 
@media (max-width: 700px) {#d700{background-color: red;}} 
@media (max-width: 690px) {#d690{background-color: red;}} 
@media (max-width: 680px) {#d680{background-color: red;}} 
@media (max-width: 670px) {#d670{background-color: red;}} 
@media (max-width: 660px) {#d660{background-color: red;}} 
@media (max-width: 650px) {#d650{background-color: red;}} 
@media (max-width: 640px) {#d640{background-color: red;}} 
@media (max-width: 630px) {#d630{background-color: red;}} 
@media (max-width: 620px) {#d620{background-color: red;}} 
@media (max-width: 610px) {#d610{background-color: red;}} 
@media (max-width: 600px) {#d600{background-color: red;}} 
@media (max-width: 590px) {#d590{background-color: red;}} 
@media (max-width: 580px) {#d580{background-color: red;}} 
@media (max-width: 570px) {#d570{background-color: red;}} 
@media (max-width: 560px) {#d560{background-color: red;}} 
@media (max-width: 550px) {#d550{background-color: red;}} 
@media (max-width: 540px) {#d540{background-color: red;}} 
@media (max-width: 530px) {#d530{background-color: red;}} 
@media (max-width: 520px) {#d520{background-color: red;}} 
@media (max-width: 510px) {#d510{background-color: red;}} 
@media (max-width: 500px) {#d500{background-color: red;}} 
@media (max-width: 490px) {#d490{background-color: red;}} 
@media (max-width: 480px) {#d480{background-color: red;}} 
@media (max-width: 470px) {#d470{background-color: red;}} 
@media (max-width: 460px) {#d460{background-color: red;}} 
@media (max-width: 450px) {#d450{background-color: red;}} 
@media (max-width: 440px) {#d440{background-color: red;}} 
@media (max-width: 430px) {#d430{background-color: red;}} 
@media (max-width: 420px) {#d420{background-color: red;}} 
@media (max-width: 410px) {#d410{background-color: red;}} 
@media (max-width: 400px) {#d400{background-color: red;}} 
@media (max-width: 390px) {#d390{background-color: red;}} 
@media (max-width: 380px) {#d380{background-color: red;}} 
@media (max-width: 370px) {#d370{background-color: red;}} 
@media (max-width: 360px) {#d360{background-color: red;}} 
@media (max-width: 350px) {#d350{background-color: red;}} 
@media (max-width: 340px) {#d340{background-color: red;}} 
@media (max-width: 330px) {#d330{background-color: red;}} 
@media (max-width: 320px) {#d320{background-color: red;}} 
@media (max-width: 310px) {#d310{background-color: red;}} 
@media (max-width: 300px) {#d300{background-color: red;}} 
@media (max-width: 290px) {#d290{background-color: red;}} 
@media (max-width: 280px) {#d280{background-color: red;}} 
@media (max-width: 270px) {#d270{background-color: red;}} 
@media (max-width: 260px) {#d260{background-color: red;}} 
@media (max-width: 250px) {#d250{background-color: red;}} 
@media (max-width: 240px) {#d240{background-color: red;}} 
@media (max-width: 230px) {#d230{background-color: red;}} 
@media (max-width: 220px) {#d220{background-color: red;}} 
@media (max-width: 210px) {#d210{background-color: red;}} 
@media (max-width: 200px) {#d200{background-color: red;}} 
@media (max-width: 190px) {#d190{background-color: red;}} 
@media (max-width: 180px) {#d180{background-color: red;}} 
@media (max-width: 170px) {#d170{background-color: red;}} 
@media (max-width: 160px) {#d160{background-color: red;}} 
@media (max-width: 150px) {#d150{background-color: red;}} 
@media (max-width: 140px) {#d140{background-color: red;}} 
@media (max-width: 130px) {#d130{background-color: red;}} 
@media (max-width: 120px) {#d120{background-color: red;}} 
@media (max-width: 110px) {#d110{background-color: red;}} 
@media (max-width: 100px) {#d100{background-color: red;}} 
@media (max-width: 90px) {#d90{background-color: red;}} 
@media (max-width: 80px) {#d80{background-color: red;}} 
@media (max-width: 70px) {#d70{background-color: red;}} 
@media (max-width: 60px) {#d60{background-color: red;}} 
@media (max-width: 50px) {#d50{background-color: red;}} 
@media (max-width: 40px) {#d40{background-color: red;}} 
@media (max-width: 30px) {#d30{background-color: red;}} 
@media (max-width: 20px) {#d20{background-color: red;}} 
@media (max-width: 10px) {#d10{background-color: red;}} 
</STYLE> 
</head> 
<body> 
Your width is approximately: 
<hr> 
<div id="d1920" >1920</div> 
<div id="d1910" >1910</div> 
<div id="d1900" >1900</div> 
<div id="d1890">1890</div> 
<div id="d1880">1880</div> 
<div id="d1870">1870</div> 
<div id="d1860">1860</div> 
<div id="d1850">1850</div> 
<div id="d1840">1840</div> 
<div id="d1830">1830</div> 
<div id="d1820">1820</div> 
<div id="d1810">1810</div> 
<div id="d1800">1800</div> 
<div id="d1790">1790</div> 
<div id="d1780">1780</div> 
<div id="d1770">1770</div> 
<div id="d1760">1760</div> 
<div id="d1750">1750</div> 
<div id="d1740">1740</div> 
<div id="d1730">1730</div> 
<div id="d1720">1720</div> 
<div id="d1710">1710</div> 
<div id="d1700">1700</div> 
<div id="d1690">1690</div> 
<div id="d1680">1680</div> 
<div id="d1670">1670</div> 
<div id="d1660">1660</div> 
<div id="d1650">1650</div> 
<div id="d1640">1640</div> 
<div id="d1630">1630</div> 
<div id="d1620">1620</div> 
<div id="d1610">1610</div> 
<div id="d1600">1600</div> 
<div id="d1590">1590</div> 
<div id="d1580">1580</div> 
<div id="d1570">1570</div> 
<div id="d1560">1560</div> 
<div id="d1550">1550</div> 
<div id="d1540">1540</div> 
<div id="d1530">1530</div> 
<div id="d1520">1520</div> 
<div id="d1510">1510</div> 
<div id="d1500">1500</div> 
<div id="d1490">1490</div> 
<div id="d1480">1480</div> 
<div id="d1470">1470</div> 
<div id="d1460">1460</div> 
<div id="d1450">1450</div> 
<div id="d1440">1440</div> 
<div id="d1430">1430</div> 
<div id="d1420">1420</div> 
<div id="d1410">1410</div> 
<div id="d1400">1400</div> 
<div id="d1390">1390</div> 
<div id="d1380">1380</div> 
<div id="d1370">1370</div> 
<div id="d1360">1360</div> 
<div id="d1350">1350</div> 
<div id="d1340">1340</div> 
<div id="d1330">1330</div> 
<div id="d1320">1320</div> 
<div id="d1310">1310</div> 
<div id="d1300">1300</div> 
<div id="d1290">1290</div> 
<div id="d1280">1280</div> 
<div id="d1270">1270</div> 
<div id="d1260">1260</div> 
<div id="d1250">1250</div> 
<div id="d1240">1240</div> 
<div id="d1230">1230</div> 
<div id="d1220">1220</div> 
<div id="d1210">1210</div> 
<div id="d1200">1200</div> 
<div id="d1190">1190</div> 
<div id="d1180">1180</div> 
<div id="d1170">1170</div> 
<div id="d1160">1160</div> 
<div id="d1150">1150</div> 
<div id="d1140">1140</div> 
<div id="d1130">1130</div> 
<div id="d1120">1120</div> 
<div id="d1110">1110</div> 
<div id="d1100">1100</div> 
<div id="d1090">1090</div> 
<div id="d1080">1080</div> 
<div id="d1070">1070</div> 
<div id="d1060">1060</div> 
<div id="d1050">1050</div> 
<div id="d1040">1040</div> 
<div id="d1030">1030</div> 
<div id="d1020">1020</div> 
<div id="d1010">1010</div> 
<div id="d1000">1000</div> 
<div id="d990">990</div> 
<div id="d980">980</div> 
<div id="d970">970</div> 
<div id="d960">960</div> 
<div id="d950">950</div> 
<div id="d940">940</div> 
<div id="d930">930</div> 
<div id="d920">920</div> 
<div id="d910">910</div> 
<div id="d900">900</div> 
<div id="d890">890</div> 
<div id="d880">880</div> 
<div id="d870">870</div> 
<div id="d860">860</div> 
<div id="d850">850</div> 
<div id="d840">840</div> 
<div id="d830">830</div> 
<div id="d820">820</div> 
<div id="d810">810</div> 
<div id="d800">800</div> 
<div id="d790">790</div> 
<div id="d780">780</div> 
<div id="d770">770</div> 
<div id="d760">760</div> 
<div id="d750">750</div> 
<div id="d740">740</div> 
<div id="d730">730</div> 
<div id="d720">720</div> 
<div id="d710">710</div> 
<div id="d700">700</div> 
<div id="d690">690</div> 
<div id="d680">680</div> 
<div id="d670">670</div> 
<div id="d660">660</div> 
<div id="d650">650</div> 
<div id="d640">640</div> 
<div id="d630">630</div> 
<div id="d620">620</div> 
<div id="d610">610</div> 
<div id="d600">600</div> 
<div id="d590">590</div> 
<div id="d580">580</div> 
<div id="d570">570</div> 
<div id="d560">560</div> 
<div id="d550">550</div> 
<div id="d540">540</div> 
<div id="d530">530</div> 
<div id="d520">520</div> 
<div id="d510">510</div> 
<div id="d500">500</div> 
<div id="d490">490</div> 
<div id="d480">480</div> 
<div id="d470">470</div> 
<div id="d460">460</div> 
<div id="d450">450</div> 
<div id="d440">440</div> 
<div id="d430">430</div> 
<div id="d420">420</div> 
<div id="d410">410</div> 
<div id="d400">400</div> 
<div id="d390">390</div> 
<div id="d380">380</div> 
<div id="d370">370</div> 
<div id="d360">360</div> 
<div id="d350">350</div> 
<div id="d340">340</div> 
<div id="d330">330</div> 
<div id="d320">320</div> 
<div id="d310">310</div> 
<div id="d300">300</div> 
<div id="d290">290</div> 
<div id="d280">280</div> 
<div id="d270">270</div> 
<div id="d260">260</div> 
<div id="d250">250</div> 
<div id="d240">240</div> 
<div id="d230">230</div> 
<div id="d220">220</div> 
<div id="d210">210</div> 
<div id="d200">200</div> 
<div id="d190">190</div> 
<div id="d180">180</div> 
<div id="d170">170</div> 
<div id="d160">160</div> 
<div id="d150">150</div> 
<div id="d140">140</div> 
<div id="d130">130</div> 
<div id="d120">120</div> 
<div id="d110">110</div> 
<div id="d100">100</div> 
<div id="d90">90</div> 
<div id="d80">80</div> 
<div id="d70">70</div> 
<div id="d60">60</div> 
<div id="d50">50</div> 
<div id="d40">40</div> 
<div id="d30">30</div> 
<div id="d20">20</div> 
<div id="d10">10</div> 
<hr> 
</body> 
</html> 

Answer 10

Vous pouvez utiliser $ _SERVER [ 'HTTP_USER_AGENT'] en utilisant le code suivant:

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__________________// 

Sortie

Si onglet laissez: 'is tablet'

Si mobile: 'is mobile'

Si bureau: 'is desktop'

Answer 11

La solution que j'ai travaillé a en fait vraiment bien depuis des années - pas de plugins, pas de cours. Fondamentalement, tout en produisant la partie HEAD de la doc, je publie un peu de JavaScript qui obtient la largeur du navigateur et l'écrit dans un cookie. Puis, plus tard, plus bas sur la page, je lis simplement le cookie qui a la largeur exacte stockée en utilisant la fonction $ _COOKIE en php. Il ne m'a pas manqué une fois dans n'importe quel scénario.

<!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>