2015-09-28 3 views
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"); 
     } 
}); 

, но есть очень много разных телефонов в настоящее время, что я не могу найти для каждого возможного устройства и добавить его раз в то время. Кроме того, андроиды также являются таблетками в наше время.

Есть ли какой-нибудь GENERIC-код, который обнаруживает смартфоны (а не планшеты, только телефоны)? Я предполагаю, что это не может быть основано на медиа-запросах.

Я пытался найти решение на основе текущих сообщений, но на мой вопрос не было однозначного ответа, поэтому я разместил его здесь.

Благодаря

ответ

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()){ 

} 

Вы можете использовать композитор в своем выпуске и обновление процесса в убедитесь, что у вас установлена ​​последняя версия Mobile_Detect.

composer require mobiledetect/mobiledetectlib 

{ 
    "require": { 
     "mobiledetect/mobiledetectlib": "^2.8" 
    } 
} 
+0

спасибо. Есть ли решение для офф-серверов? jquery возможно? –

+0

вы можете обнаружить агентов в jquery, но это немного движущаяся цель, поэтому я бы не рекомендовал. – RichTea