Способ определить ширину браузера в PHP без JavaScript? - PullRequest
Новая
       45

Способ определить ширину браузера в PHP без JavaScript?

3 голосов
/ 14 февраля 2010

Во-первых, есть ли один? Или я должен был бы использовать JavaScript? Я хотел бы иметь возможность вносить изменения в используемый CSS, чтобы я мог загружать меньшие шрифты для мобильного устройства или чего-то еще.

Ответы [ 11 ]

7 голосов
/ 14 февраля 2010

К сожалению, нет способа определить разрешение пользователя только с помощью PHP. Если вы используете Javascript, вы можете установить это значение в файле cookie, и все последующие запросы могут проверить значение этого файла cookie. Похоже, этот метод довольно популярен среди тех, кто работает с этой проблемой.

Вы также можете запустить небольшой javascript со страницы, который проверяет, установлен ли файл cookie разрешения. Если это не так, он отправляет асинхронный запрос на сервер, содержащий разрешение экрана. Сервер определяет, какой CSS-файл использовать по этому значению, и отправляет свой путь обратно в JavaScript. Затем устанавливается cookie, чтобы указать, что разрешение было определено, и файл css впоследствии загружается (через javascript) на страницу. Все будущие запросы прекращаются, если они зависят от файла cookie разрешения.

4 голосов
/ 03 марта 2016

Вы можете использовать $ _ 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'

4 голосов
/ 12 ноября 2014

Чистый трюк 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>
4 голосов
/ 14 февраля 2010

Это может быть полезно, если вы не хотите использовать JavaScript:

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

3 голосов
/ 14 февраля 2010

Нет способа сделать это. Если вы хотите определить, какое устройство используется, вам следует проверить $_SERVER['HTTP_USER_AGENT'] на наличие улик.

2 голосов
/ 28 июля 2013

Лучший способ сделать это - использовать 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;
    }
}
2 голосов
/ 03 мая 2010

Вы должны взглянуть на 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'];
?>
1 голос
/ 20 января 2018

Решение, которое у меня есть, действительно хорошо работало в течение многих лет - без плагинов, без классов. По сути, при выводе части документа в формате 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>
1 голос
/ 14 февраля 2010

Взгляните на WURFL .
Как предложил в своем ответе Игнасио Васкес-Абрамс, он использует строку агента пользователя, чтобы «угадать» разрешение для известных устройств. Если вы беспокоитесь о мобильных устройствах, это, вероятно, так же точно, как вы можете получить без помощи клиентского скрипта / приложения.

1 голос
/ 14 февраля 2010

Все, что вы можете сделать, это определить модель браузера. Оттуда вы можете выбрать обычные мобильные браузеры (все iPhone встраивают iPhone в строку useragent), загружать шрифты меньшего размера по умолчанию и настраивать их оттуда.

Страница:
...