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

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

解决方案3

Modernizer - Client

解决方案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

Detect mobile browser

从未亲自使用过这个

更多信息

我的另一个答案中描述了更多这样的内容，找到它here。

Answer 2

1）使用CSS（感谢Titanium）

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


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

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

2）使用JavaScript

document.write("User-agent header sent: " + navigator.userAgent);

3）能力测试是什么意思？