[英]How to detect a mobile device in a web page
對於一個網站,我想為移動設備使用特定的CSS規則。 我想要的是以下內容:
<a href="tel:+1234567890">+1234567890</a>
(類似於mailto:john@hotmail.com) 我想使用CSS通過非移動設備上的鏈接隱藏電話號碼,並顯示另一個帶有普通電話號碼的元素。 我可以使用media =“掌上電腦”選項,但似乎Android和iOS忽略了這一點。 一個干凈的CSS方法是首選,但如果需要Javascript(或JQuery)則沒有問題。
我現在的問題是關於這個電話鏈接,但我可能會使用相同的方法對移動設備的樣式表進行其他更改。
這是我用來檢查給定請求是否來自移動設備:
$mobile_browser = '0';
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/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','oper','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']),'windows') > 0) {
$mobile_browser = 0;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'mac') > 0) {
$mobile_browser = 0;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'ios') > 0) {
$mobile_browser = 1;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'android') > 0) {
$mobile_browser = 1;
}
if($mobile_browser == 0)
{
//its not a mobile browser
echo"You are not a mobile browser";
} else {
//its a mobile browser
echo"You are a mobile browser!";
}
?>
我是在我的配偶的幫助下做到的,如果你有我的提示或更正,請在評論中給出:)
如果你只想要一個使用“tel”的href的選擇器你可以使用css attr“start with”選擇器,就像這樣......
a[href^="tel"] { color: red; }
看看我的例子: http : //jsfiddle.net/blowsie/gn9Ld/
也許你可以使用callto:
<a href="callto://+112345767890">Call me at +112345767890</a>
既然你正在為移動設備開發,我認為你應該閱讀CSS3媒體查詢,如果你還沒有這樣做的話。
http://ubelly.com/2011/04/css3-media-queries-explained/?amp&
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.