【发布时间】:2011-11-03 13:00:46
【问题描述】:
我正在尝试建立一个网站。强制是它应该适用于 Iphone、Android、Samsung Galaxy S/S2、Ipad、Samsung Galaxy Tab 等。并且必须提供相同的体验。有没有办法检测哪个移动浏览器正在发出页面请求,并相应地应用使用 Jquery 为它制作的 CSS? 我只想严格使用 HTML5、Jquery、CSS3。
【问题讨论】:
标签: javascript jquery html css
我正在尝试建立一个网站。强制是它应该适用于 Iphone、Android、Samsung Galaxy S/S2、Ipad、Samsung Galaxy Tab 等。并且必须提供相同的体验。有没有办法检测哪个移动浏览器正在发出页面请求,并相应地应用使用 Jquery 为它制作的 CSS? 我只想严格使用 HTML5、Jquery、CSS3。
【问题讨论】:
标签: javascript jquery html css
页面顶部的默认样式表
<link rel="stylesheet" href="default.css" type="text/css">
扩展jquery库检测iphone/ipad
<script type="text/javascript">
jQuery.extend(jQuery.browser,
{SafariMobile : navigator.userAgent.toLowerCase().match(/iP(hone|ad)/i) }
);
</script>
然后检查浏览器是否属于类型并相应地更改样式表
<script type="text/javascript">
$(function(){
if($.browser.SafariMobile){
$("link[rel=stylesheet]").attr({href : "iphone.css"});
}
})
</script>
【讨论】:
您需要 CSS3 媒体查询来检测设备宽度、分辨率和方向。您可以使用 Mobile Boilerplate - http://html5boilerplate.com/mobile
【讨论】:
在一般情况下,您要尝试做的事情非常困难。 问题不是浏览器检测。可以使用上面给出的任何方法检测浏览器。但是获得屏幕宽度和大小以及 HTML 支持的实际功能要困难得多。
有一个名为WFURL 的开源项目维护了一个包含所有受支持设备及其集成和使用能力的数据库。
我们所做的是使用像JQuery Mobile 这样的框架,它会自动在各种手机中提供相似的外观和感觉。然而,这个框架仍然很原始。
梅赛德斯奔驰、ebay、mtv india、google 等大多数网站这样做的方式是使用 [NetBiscuits] (http://www.netbiscuits.com/) 之类的东西来设计他们的移动网站。通过这种方式,他们编写一次代码(尽管是在 BiscuitML 中),NetBiscuits 完成了检测移动设备和优化网站的工作。例如,查看link 使用 NetBiscuits 的客户。
NetBiscuits 可能不是唯一可以做到这一点的框架(我知道 IBM 提供了一个解决方案作为其 websphere 门户服务器的一部分),但它是我所知道的最受欢迎的。
【讨论】:
您可以使用以下语句来获取有关浏览器的信息。
$_SERVER['HTTP_USER_AGENT']
或
$browser = get_browser(null, true);
print_r($browser);
【讨论】: