CSS 또는 JS를 사용하여 기기 유형 식별

Question

그래서 나는 도움이 필요한 초보자라고 두려워합니다. 저는 학교 웹 사이트를 담당하고 있으며 장치에 따라 특정 내용을 표시하는 데 사용할 수있는 미리 만들어진 블록이 있습니다. 그러나 안드로이드 태블릿과 휴대 전화의 차이점을 알 수 없으며 항상 모바일 버전을 보여줍니다.

사용자 기기를 식별하기 위해 이것을 수동으로 설정할 수있는 방법이 있습니까? 사전에

많은 감사합니다! Rob

Answer 1

CSS 포함 screen-width 및 media-queries (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)을 기반으로 할 수 있습니다. 예를 들어 트위터 부트 스트랩을 개발하는 방법을 살펴보십시오.

그리고 JS와

가 이것에 대해 말을 많이하지만, 대부분은이 항목의 예를 들어 찾을 수 있습니다 ( How to detect a mobile device with JavaScript?

내가 ussualy 예를 들어, CONFIGS 내 JS 앱 네임 스페이스에이 정보를 유지하려고 Symfony2의 경우에 유용한 번들()로를 검출 할 수있다 곳

var App = {  
    'CONFIG' : { 
     'IS_TABLET' : {% if isTablet() %}true{% else %}false{% endif %}, 
     'IS_PHONE' : {% if isMobile() %}true{% else %}false{% endif %} 
    }  
} 

isTablet() 및 isMobile()) 나뭇 가지와 백엔드에서입니다.

그러나 당신은 그것을 다른 장치/브라우저/디스플레이 크기 등 보다는 해킹 솔루션에서 작동 될 것입니다 하나 개의 솔루션을 만드는 할 수있는 최선은, JS 당신에 보편적

Answer 2

을 만들려고 참조 ... 당신은 지금까지 해봤 무엇을 우리에게 보여,

var isMobile = { Android: function() { return /Android/i.test(navigator.userAgent); }, BlackBerry: function() { return /BlackBerry/i.test(navigator.userAgent); }, iOS: function() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }, Windows: function() { return /IEMobile/i.test(navigator.userAgent); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); } };

당신은 귀하의 게시물에 노력을 보여 주어야