区分桌面用户和移动用户的方法

Question

我的团队正在努力开发一个桌面和移动网站,我们希望某些功能只适用于移动用户.我们一直在集思广益,检测移动和桌面用户的不同方法,并集体讨论以下想法

1) Check for screensize , if its less than certain size , we can safely assume 
   it is desktop

2) Check user browser user agent string

3) Capability testing

是否还有其他方法可以检测桌面和移动,如果可能的话请列出方法的优缺点.

谢谢

Answer 1

介绍

可用的解决方案很少,但我只会命名开源解决方案,至少解决方案主要与jQuery/jQuery Mobile一起使用.另外要注意的是,这个话题有可能引发战争.一方面,我们有一个服务器端检测的支持者和他们的社区维护数据库,另一方面,我们有客户端支持他们的浏览器嗅探.

解决方案1

WURFL

解决方案2

Modernizr - 服务器

解决方案3

Modernizer - 客户

解决方案4

基于JavaScript的浏览器嗅探

<script type="text/javascript">     
    var agent = navigator.userAgent;      
    var isWebkit = (agent.indexOf("AppleWebKit") > 0);      
    var isIPad = (agent.indexOf("iPad") > 0);      
    var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);     
    var isAndroid = (agent.indexOf("Android")  > 0);     
    var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);     
    var isWebOS = (agent.indexOf("webOS") > 0);      
    var isWindowsMobile = (agent.indexOf("IEMobile") > 0);     
    var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));     
    var isUnknownMobile = (isWebkit && isSmallScreen);     
    var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);     
    var isTablet = (isIPad || (isMobile && !isSmallScreen));     

    if ( isMobile && isSmallScreen && document.cookie.indexOf( "mobileFullSiteClicked=") < 0 ) mobileRedirect(); 
</script>

解决方案5

CSS媒体查询

这曾经是一个伟大而简单的解决方案,但不再是,主要是因为移动设备达到并超过台式电脑屏幕尺寸.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

解决方案6

检测移动浏览器

从未亲自使用过这个

更多信息

更多这方面在我的其他答案中描述,请在此处找到.