3

我的团队正在尝试开发一个同时适用于桌面和移动设备的网站，我们希望某些功能仅适用于移动用户。我们一直在集思广益来检测移动和桌面用户的不同方法，并集思广益以下想法

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

是否有其他方法可以检测桌面和移动设备之间的差异，如果可能，请列出该方法的优缺点。

谢谢

4

2 回答 2

7

介绍

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

解决方案 1

WURFL

解决方案 2

Modernizr - 服务器

解决方案 3

现代化者 - 客户

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

检测手机浏览器

从来没有亲自使用过这个

更多信息

我的其他答案中对此进行了更多描述，请在此处找到。

于 2013-09-19T09:23:09.973 回答
0

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）能力测试是什么意思？

于 2013-09-19T08:00:51.223 回答