一种在没有javascript的情况下确定PHP浏览器宽度的方法?

首先是有一个吗?或者我必须使用JavaScript? 我希望能够更改使用哪个CSS,因此frex我可以为移动设备加载较小的字体,或者其他什么。     
已邀请:
没有办法做到这一点。如果您想检测正在使用的设备,那么您应该检查
$_SERVER['HTTP_USER_AGENT']
的线索。     
遗憾的是,无法仅使用PHP检测用户分辨率。如果您使用Javascript,则可以在cookie中设置此值,并且所有后续请求都可以检查该cookie的值。对于处理此问题的人来说,这似乎是一种非常流行的方法。 您还可以从页面运行一个小的javascript来检查是否设置了resolution-cookie。如果不是,它会向包含屏幕分辨率的服务器发送异步请求。服务器确定此值使用哪个CSS文件,并将其路径发送回javascript。然后设置cookie以指示已确定分辨率,随后将css文件(通过javascript)加载到页面中。假设它们取决于决议cookie,所有未来的请求都将停止。     
如果您不想使用任何JavaScript,这可能会有所帮助: http://www.w3.org/TR/CSS2/media.html#media-types     
您可以使用以下代码使用$ _SERVER ['HTTP_USER_AGENT']: 码:
//_______________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 ','','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','',
    'maui','maxo','midp','mits','mmef','mobi','','moto','mwbp','',
    'newt','noki','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','','','send','seri','','shar',
    '','siem','smal','smar','sony','','symb','t-mo','teli','',
    'tosh','','upg1','upsi','vk-v','voda','','wapa','wapi','wapp',
    'wapr','webc','winw','winw','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__________________//
产量 如果平板电脑:
'is tablet'
如果移动:
'is mobile'
如果桌面:
'is desktop'
    
纯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>
    
你应该看看Tera-WURFL,它是一个PHP&amp;基于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和媒体类型 在这里,我给你一个你想要的例子,即它适应许多标签的字体大小,以及div [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;
    }
}
    
您可以做的就是检测浏览器型号。从那里你可以匹配常见的移动浏览器(iPhone都将iPhone粘贴到useragent字符串中)并默认加载较小的字体并从那里进行调整。     
看看WURFL。 正如Ignacio Vazquez-Abrams在他的回答中所建议的,它使用用户代理字符串来“猜测”已知设备的分辨率。如果您担心移动设备可能没有客户端脚本/应用程序的帮助那么准确。     
您将不得不使用JavaScript。服务器对高度客户端数据一无所知。幸运的是,JavaScript可以很容易地操作样式和样式表,因此它应该能够解决您的问题,甚至不涉及任何服务器端。 对于移动设备,另一个简单的工具是将样式表上的媒体类型设置为手持设备。     
我所拥有的解决方案实际上已经很好地实现了多年 - 没有插件,没有类。基本上,在输出doc的HEAD部分时,我输出一些获取浏览器宽度的JavaScript并将其写入cookie。然后,稍后,在页面的下方,我只需使用php中的$ _COOKIE函数读取具有确切宽度的cookie。在任何情况下,它都没有让我失望过。
    <!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>
    

要回复问题请先登录注册