Способ определить ширину браузера в PHP без JavaScript?
Во-первых, есть ли один? Или я должен был бы использовать JavaScript? Я хотел бы иметь возможность вносить изменения в том, какой CSS используется, чтобы я мог загружать меньшие шрифты для мобильного устройства или чего-то еще.
11 ответов
Решение
Нет способа сделать это. Если вы хотите определить, какое устройство используется, вам следует изучить $_SERVER['HTTP_USER_AGENT'] для подсказок.
К сожалению, невозможно определить разрешение пользователей только с помощью PHP. Если вы используете Javascript, вы можете установить это значение в cookie, и все последующие запросы могут проверять значение этого cookie. Это кажется довольно популярным методом для тех, кто работает с этой проблемой.
Вы также можете запустить небольшой javascript со страницы, который проверяет, установлен ли файл cookie разрешения. Если это не так, он отправляет асинхронный запрос на сервер, содержащий разрешение экрана. Сервер определяет, какой CSS-файл использовать по этому значению, и отправляет свой путь обратно в javascript. Затем устанавливается cookie, чтобы указать, что разрешение было определено, и файл css впоследствии загружается (через javascript) на страницу. Все будущие запросы прекращаются, если они зависят от файла cookie разрешения.
Чистый трюк 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>
Вы можете использовать $_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 ','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__________________//
Выход
Если планшет: 'is tablet'
Если мобильный: 'is mobile'
Если рабочий стол: 'is desktop'
Это может быть полезно, если вы не хотите использовать JavaScript:
Лучший способ сделать это - использовать 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;
}
}
Решение, которое у меня есть, действительно работает очень хорошо в течение многих лет - без плагинов, без классов. По сути, при выводе части документа в формате HEAD я выводил некоторый JavaScript, который получает ширину браузера и записывает его в файл cookie. Затем, позже, вниз по странице, я просто прочитал cookie, размер которого точно сохранен, используя функцию $_COOKIE в php. Это не подвело меня ни разу в любом сценарии.
<!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>
Вы должны взглянуть на Tera-WURFL, это программный пакет на основе PHP и MySQL, который обнаруживает мобильные устройства и их возможности. Вот код Tera-WURFL, который вы бы использовали для определения ширины браузера в 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'];
?>
Все, что вы можете сделать, это определить модель браузера. Оттуда вы можете выбрать обычные мобильные браузеры (все айфоны вставляют iPhone в строку useragent), загружать шрифты меньшего размера по умолчанию и настраивать их оттуда.
Посмотрите на WURFL.
Как предложил в своем ответе Игнасио Васкес-Абрамс, он использует строку агента пользователя, чтобы "угадать" разрешение для известных устройств. Если вы беспокоитесь о мобильных устройствах, это, вероятно, так же точно, как вы можете получить без помощи клиентского скрипта / приложения.
Вам придется использовать JavaScript. Сервер ничего не знает о таких данных на стороне клиента. К счастью, JavaScript может довольно легко манипулировать стилями и таблицами стилей, поэтому он должен быть в состоянии решить вашу проблему, даже не затрагивая ничего на стороне сервера.
В случае мобильных устройств еще одним простым инструментом является установка типа носителя в таблице стилей для переносного устройства.