一种不用javascript在PHP中确定浏览器宽度的方法？
首先，有吗？还是我必须使用javascript？一种不用javascript在PHP中确定浏览器宽度的方法？,php,browser-width,Php,Browser Width,首先，有吗？还是我必须使用javascript？ 我希望能够更改CSS的使用，这样我就可以为移动设备加载更小的字体，或者其他任何东西。没有办法做到这一点。如果你想检测正在使用的设备，那么你应该检查$\u服务器['HTTP\u USER\u AGENT']以获取线索。不幸的是，仅用PHP无法检测用户分辨率。如果使用Javascript，可以在cookie中设置该值，所有后续请求都可以检查该cookie的值。对于处理这个问题的人来说，这似乎是一种非常流行的方法 您还可以从页面运行一个小javascr
我希望能够更改CSS的使用，这样我就可以为移动设备加载更小的字体，或者其他任何东西。没有办法做到这一点。如果你想检测正在使用的设备，那么你应该检查
$\u服务器['HTTP\u USER\u AGENT']您还可以从页面运行一个小javascript，检查是否设置了解析cookie。如果不是，它将向包含屏幕分辨率的服务器发送一个异步请求。服务器根据该值确定要使用的CSS文件，并将其路径发送回javascript。然后设置cookie以指示已确定分辨率，随后将css文件（通过javascript）加载到页面中。所有未来的请求都将不再假设它们取决于解析cookie。您所能做的就是检测浏览器模型。从那里，您可以匹配常见的移动浏览器（iPhone都将iPhone粘贴到useragent字符串中），默认情况下加载较小的字体并从那里进行调整。如果您不想使用任何JavaScript，这可能会有一些用处： 看一看。
正如Ignacio Vazquez Abrams在回答中所建议的，它使用用户代理字符串“猜测”已知设备的分辨率。如果您关心的是移动设备，那么在没有客户端脚本/应用程序帮助的情况下，它可能会尽可能准确。您将不得不使用JavaScript。服务器对这样的高度客户端数据一无所知。幸运的是，JavaScript可以非常轻松地操作样式和样式表，因此它应该能够解决您的问题，甚至不涉及任何服务器端的内容 对于移动设备，另一个简单的工具是将样式表上的媒体类型设置为掌上型。您应该看到，它是一个基于PHP和MySQL的软件包，用于检测移动设备及其功能。以下是您将用于在PHP中检测浏览器宽度的Tera WURFL代码：
<?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'];
?>
最好的方法是将CSS与媒体类型一起使用 这里我给你一个你想要的例子，也就是说，它根据浏览器的宽度调整许多标签的字体大小，以及divs[1,2,3]方向（水平或垂直） 我在这里使用的“p5”标记的字体比“p4”大 最好在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;
}
}
纯HTML和CSS的技巧，以获得显示的宽度。这将使你在10像素以内。它以红色高亮显示，直到显示宽度。第一个黑白数字应为显示宽度：
<!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>
飞镖食品
hr{背景色：红色；边框：1px纯蓝色；}
@介质（最大宽度：1920px）{d1920{背景色：红色；}
@介质（最大宽度：1910px）{d1910{背景色：红色；}
@介质（最大宽度：1900px）{d1900{背景色：红色；}
@媒体（最大宽度：1890px）{d1890{背景色：红色；}
@介质（最大宽度：1880px）{d1880{背景色：红色；}
@介质（最大宽度：1870px）{d1870{背景色：红色；}
@媒体（最大宽度：1860px）{d1860{背景色：红色；}
@介质（最大宽度：1850px）{d1850{背景色：红色；}
@介质（最大宽度：1840px）{d1840{背景色：红色；}
@介质（最大宽度：1830px）{d1830{背景色：红色；}
@介质（最大宽度：1820px）{d1820{背景色：红色；}
@介质（最大宽度：1810px）{d1810{背景色：红色；}
@介质（最大宽度：1800px）{d1800{背景色：红色；}
@介质（最大宽度：1790px）{d1790{背景色：红色；}
@介质（最大宽度：1780px）{d1780{背景色：红色；}
@介质（最大宽度：1770px）{d1770{背景色：红色；}
@介质（最大宽度：1760px）{d1760{背景色：红色；}
@介质（最大宽度：1750px）{d1750{背景色：红色；}
@介质（最大宽度：1740px）{d1740{背景色：红色；}
@介质（最大宽度：1730px）{d1730{背景色：红色；}
@介质（最大宽度：1720px）{d1720{背景色：红色；}
@介质（最大宽度：1710px）{d1710{背景色：红色；}
@介质（最大宽度：1700px）{d1700{背景色：红色；}
@介质（最大宽度：1690px）{d1690{背景色：红色；}
@介质（最大宽度：1680px）{d1680{背景色：红色；}
@介质（最大宽度：1670px）{d1670{背景色：红色；}
@媒体（最大宽度：1660px）{d1660{背景色：红色；}
@媒体（最大宽度：1650px）{d1650{背景色：红色；}
@介质（最大宽度：1640px）{d1640{背景色：红色；}
@媒体（最大宽度：1630px）{d1630{背景色：红色；}
@介质（最大宽度：1620px）{d1620{背景色：红色；}
@介质（最大宽度：1610px）{d1610{背景色：红色；}
@介质（最大宽度：1600px）{d1600{背景色：红色；}
@介质（最大宽度：1590px）{d1590{背景色：红色；}
@媒体（最大宽度：1580px）{d1580{背景色：红色；}
@介质（最大宽度：1570px）{d1570{背景色：红色；}
@媒体（最大宽度：1560px）{d1560{背景色：红色；}
@媒体（最大宽度：1550px）{d1550{背景色：红色；}
@媒体（最大宽度：1540px）{d1540{背景色：红色；}
@介质（最大宽度：1530px）{d1530{背景色：红色；}
@介质（最大宽度：1520px）{d1520{背景色：红色；}
@介质（最大宽度：1510px）{d1510{背景色：红色；}
@介质（最大宽度：1500px）{d1500{背景色：红色；}
@介质（最大宽度：1490px）{d1490{背景色：红色；}
@媒体（最大宽度：1480px）{d1480{背景色：红色；}
@介质（最大宽度：1470px）{d1470{背景色：红色；}
@介质（最大宽度：1460px）{d1460{背景色：红色；}
@介质（最大宽度：1450px）{d1450{背景色：红色；}
@介质（最大宽度：1440px）{d1440{背景色：红色；}
@
//_______________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__________________//
<!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>