Question

我在我的网站上使用以下HTML：

<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>

这样做的目的是在检测到适当的浏览器时在桌面和移动版本的网站之间切换。我的问题是我的HTC Hero Android浏览器没有显示该网站的移动版本，而是仅显示桌面版本。我的浏览器设置为尽可能显示网站的移动版本。我在这里做错了什么？

PS。移动网站只是我课程的技术演示，因此只需要在我的浏览器中查看该网站的移动版本（这是我正在评估的CSS）。

Answer 1

掌上电脑用于附加CSS文件对于移动设备，但它没有使用通过Android和iPhone。

来源：http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-android/

所以你可以使用以下内容：

<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" />

Answer 2

根据this page，Android的浏览器不会加载标记为media="handheld"的样式表。

我在iPhone样式表上的问题代码应该适用于Android（虽然我没有尝试过）：How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

历史记录：handheld媒体类型是在Apple发布iPhone及其Safari版本之前发明和使用的。（Android，如果我理解正确的话，有效地使用与Mobile Safari相同的渲染引擎。）Mobile Safari的整体理念是它呈现了互联网，就像你在桌面上看到它一样。如果它使用了handheld样式表，那么对于包含它们的网站来说，它将会非常简化，因为手持式样式表针对旧的，非常简单的手机网络浏览器。

Answer 3

我不是这个主题的专家，但我的猜测是你的手机使用的是现代浏览器，就像桌面浏览器一样，并选择了错误的样式表。

服务器端脚本可以根据用户代理轻松确定正确的文件，但在您的方案中可能不可行。这绝对可以帮助你节省数小时的头痛。

Answer 4

我也玩过这个，但它没有用。在Google上搜索后，似乎无法在任何地方或每个移动设备上支持media="handheld"。

但是在这里你有一个高级课程，可以帮助你使用PHP：http://codecanyon.net/item/php-mobile-phone-detection/98397

Answer 5

我找到的最简单的方法是使用简单的设备检测，我在http://mobiforge.com/developing/story/lightweight-device-detection-php找到了一篇很好的文章和代码。

他们提供的代码如下

<?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
}   

?>

然后将你的css包含在底部的if语句中。

Answer 6

只需在第一个标签中的 head 部分使用此元标签即可。

meta name="viewport" content="width=device-width, initial-scale=1"

我的手机没有显示我的网站的移动版本

6 个答案: