My phone is not displaying the mobile oriented version of my site
I am using the following HT开发者_开发知识库ML on my site:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld"/>
</head>
The purpose of this is to switch between the desktop and mobile version of the site when the appropriate browser is detected. My problem is that my HTC Hero Android browser is not displaying the mobile version of the site, and is instead displaying only the desktop version. My browser is set to display the mobile version of a site where possible. What am I doing wrong here?
PS. The mobile site is only a tech demo for my coursework, and so it only needs to be viewable in my browser to show that there is a mobile version of the site (it's my CSS that's being evaluated).
handheld is used to attach CSS file for mobile devices, but it isn't used by Android and iPhone.
source : http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-android/
So you can use something like the following:
<link rel="stylesheet" href="css/style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" />
<link rel="stylesheet" href="css/mobile.css" media="handheld" type="text/css" />
According to this page, Android’s browser doesn’t load stylesheets marked as media="handheld".
The code from my question on iPhone stylesheets should work for Android (although I haven’t tried it): How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?
History: the handheld media type was invented and used before Apple released the iPhone, and its version of Safari. (Android, if I understand correctly, effectively uses the same rendering engine for its browser as Mobile Safari does.) The whole idea of Mobile Safari was that it rendered the internet like you’d see it on a desktop. If it had used handheld stylesheets, it would have been stuck with a very simplified look for websites that included them, as handheld stylesheets were targeted at old, really simple phone web browsers.
I'm no expert in the topic, but my guess is that your phone uses a modern browser that acts like a desktop one, and chooses the wrong stylesheet.
A server-side script could easily determine the proper file depending on the User-Agent, but it may not be feasible in your scenario. It'd definitely save you hours of headache.
The easiest way I have found is to use simple device detection, I found a good article and code at http://mobiforge.com/developing/story/lightweight-device-detection-php.
The code they give is as follows
<?php
$mobile_browser = '0';
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/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['ALL_HTTP']),'OperaMini')>0) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
$mobile_browser=0;
}
if($mobile_browser>0) {
// do something
}
else {
// do something else
}
?>
Then just include your css in the if statement at the bottom.
I played around with this as well and it didn't work. After searching on Google it appears media="handheld" is not supported everywhere or by every mobile.
But here you have a premium class that will help you out if you use PHP: http://codecanyon.net/item/php-mobile-phone-detection/98397
Just use this meta tag in your head section among the first tags.
meta name="viewport" content="width=device-width, initial-scale=1"
加载中,请稍侯......
精彩评论