0

我需要为手机加载不同的 CSS 样式表，而不是为平板电脑加载不同的 CSS 样式表。我过去使用以下解决方案：

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=480">
<link rel="stylesheet" media="only screen and (max-width: 480px)"href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 481px)" href="desktop.css" />

或者：

@media only screen and (max-width: 480px) {
}

但两者都基于屏幕分辨率。现在大部分手机都使用了更高的分辨率，所以它不会像我想要的那样工作，原因如下：平板电脑也会受到这部分的影响：

<meta name="viewport" content="width=480">

我希望平板电脑像台式机/笔记本电脑一样工作。

另外，我试图这样做：

var IS_IPHONE = navigator.userAgent.match(/iPhone/i) != null;
var IS_ANDROID = navigator.userAgent.match(/Android/i)  != null;

if(IS_IPHONE)    ({
      url: href,
      dataType: 'css',
      success: function(){                  
            $('<link rel="stylesheet" type="text/css" href="'+css/iphone.css+'" />').appendTo("head");
        }
});

if(IS_ANDROID)    ({
      url: href,
      dataType: 'css',
      success: function(){                  
            $('<link rel="stylesheet" type="text/css" href="'+css/android.css+'" />').appendTo("head");
        }
});

但是现在有这么多不同的手机，我无法搜索所有可能的设备并添加一次。此外，安卓现在也是平板电脑。

是否有任何通用代码可以检测智能手机（不是平板电脑，只是手机）？我想它不能基于媒体查询。

我试图根据当前帖子找到解决方案，但我的问题没有明确的答案，所以我在这里发布了。

谢谢

4

1 回答 1

1

Mobile Detect 是一种非常简单有效的 PHP 设备检测方法 - https://github.com/serbanghita/Mobile-Detect

用最简单的话来说：

/ Include and instantiate the class.
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) {

}

// Any tablet device.
if( $detect->isTablet() ){

}

// Exclude tablets.
if( $detect->isMobile() && !$detect->isTablet() ){

}

您可以在发布和更新过程中使用 composer 来确保您拥有最新的 Mobile_Detect 版本。

composer require mobiledetect/mobiledetectlib

{
    "require": {
        "mobiledetect/mobiledetectlib": "^2.8"
    }
}
于 2015-09-29T08:39:49.583 回答