사용자가 jQuery에서 모바일 장치를 사용하고 있는지 여부를 감지하는 확실한 방법이 있습니까? CSS @media 속성과 비슷한 것이 있습니까? 브라우저가 핸드 헬드 장치에있는 경우 다른 스크립트를 실행하고 싶습니다.
jQuery $.browser함수는 내가 찾고있는 것이 아닙니다.
답변
편집자 주 : 사용자 에이전트 감지는 최신 웹 앱에 권장되는 기술이 아닙니다. 이 사실을 확인하려면이 답변 아래의 주석을 참조하십시오. 기능 감지 및 / 또는 미디어 쿼리를 사용하여 다른 답변 중 하나를 사용하는 것이 좋습니다.
jQuery를 사용하는 대신 간단한 JavaScript를 사용하여 감지 할 수 있습니다.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}또는 jQuery를 통해 더 쉽게 액세스 할 수 있도록 두 가지를 결합 할 수 있습니다 …
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));이제 위의 모든 장치로 $.browser돌아갑니다."device"
참고 : jQuery v1.9.1에서$.browser 제거되었습니다 . 그러나 jQuery 마이그레이션 플러그인 코드를 사용하여 이것을 사용할 수 있습니다.
보다 철저한 버전 :
var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
isMobile = true;
}답변
나에게 작은 것은 아름답 기 때문에이 기술을 사용하고 있습니다.
CSS 파일에서 :
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
#some-element { display: none; }
}jQuery / JavaScript 파일에서 :
$( document ).ready(function() {
var is_mobile = false;
if( $('#some-element').css('display')=='none') {
is_mobile = true;
}
// now i can use is_mobile to run javascript conditionally
if (is_mobile == true) {
//Conditional script here
}
});내 목표는 내 사이트를 “모바일 친화적”으로 만드는 것이 었습니다. 그래서 CSS 미디어 쿼리를 사용하여 화면 크기에 따라 요소를 표시하거나 숨 깁니다.
예를 들어, 모바일 버전에서는 Facebook Like Box를 활성화하고 싶지 않습니다. 모든 프로파일 이미지와 내용을로드하기 때문입니다. 모바일 방문자에게는 좋지 않습니다. 따라서 컨테이너 요소를 숨기는 것 외에도 jQuery 코드 블록 (위) 에서이 작업을 수행합니다.
if(!is_mobile) {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}http://lisboaautentica.com 에서 실제로 볼 수 있습니다.
나는 여전히 모바일 버전으로 작업하고 있으므로이 글을 쓸 때 여전히 제대로 보이지 않습니다.
dekin88에 의해 업데이트
미디어 감지를 위해 내장 된 JavaScript API가 있습니다. 위의 솔루션을 사용하는 대신 다음을 사용하십시오.
$(function() {
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});브라우저 지원 : http://caniuse.com/#feat=matchmedia
이 방법의 장점은 더 간단하고 짧을뿐 아니라 필요에 따라 더미 요소를 DOM에 추가하지 않고도 스마트 폰 및 태블릿과 같은 다른 장치를 개별적으로 대상으로 지정할 수 있다는 것입니다.
답변
Mozilla 에 따르면 -사용자 에이전트를 사용한 브라우저 감지 :
요약하면, 모바일 장치를 감지하려면 사용자 에이전트의 어느 곳에서나“Mobi”라는 문자열을 찾는 것이 좋습니다.
이처럼 :
if (/Mobi/.test(navigator.userAgent)) {
// mobile!
}모바일 모질라, 사파리, IE, 오페라, 크롬 등 모든 일반적인 모바일 브라우저 사용자 에이전트와 일치합니다.
안드로이드 업데이트
태블릿 용 Chrome 사용자 에이전트 문자열 에 “Mobi”가 포함되어 있지 않기 Android때문에 EricL 은 사용자 에이전트로도 테스트 할 것을 권장 합니다 (전화 버전에는 해당).
if (/Mobi|Android/i.test(navigator.userAgent)) {
// mobile!
}답변
간단하고 효과적인 원 라이너 :
function isMobile() { return ('ontouchstart' in document.documentElement); }그러나 위의 코드는 터치 스크린이있는 랩톱의 경우를 고려하지 않습니다. 따라서 @Julian 솔루션을 기반으로 두 번째 버전을 제공합니다 .
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}답변
모바일 장치를 감지하여 수행하는 작업이 “브라우저 스니핑”개념 IMO에 너무 가깝습니다. 일부 기능 감지를 수행하는 것이 훨씬 낫습니다. http://www.modernizr.com/ 과 같은 라이브러리 가 도움이 될 수 있습니다.
예를 들어, 모바일과 비 모바일 사이의 경계는 어디에 있습니까? 매일 점점 더 흐릿 해집니다.
답변
jQuery는 아니지만 http://detectmobilebrowser.com/을 찾았습니다.
여러 언어로 모바일 브라우저를 감지하는 스크립트를 제공하며 그 중 하나는 JavaScript입니다. 그것은 당신이 찾고있는 것을 도울 수 있습니다.
그러나 jQuery를 사용하므로 jQuery.support 콜렉션을 알고 자 할 수 있습니다. 현재 브라우저의 기능을 감지하기위한 속성 모음입니다. 설명서는 다음과 같습니다. http://api.jquery.com/jQuery.support/
나는 당신이 무엇을 성취하려고하는지 정확히 알지 못하기 때문에, 이것들 중 어느 것이 가장 유용한 지 모르겠습니다.
모든 말을 들어, 최선의 방법은 서버 측 언어를 사용하여 다른 스크립트를 출력으로 리디렉션하거나 작성하는 것입니다 (옵션 인 경우). 실제로 모바일 브라우저 x의 기능을 모르기 때문에 서버 측에서 감지 및 변경 논리를 수행하는 것이 가장 신뢰할 수있는 방법입니다. 물론, 서버 측 언어를 사용할 수 없다면 그 모든 것이 논점입니다. 🙂
답변
때때로 iPhone 스토어 또는 Android 마켓에 대한 링크와 같이 해당 장치에 특정한 콘텐츠를 표시하기 위해 클라이언트가 사용하는 브랜드 장치를 알아야합니다. Modernizer는 훌륭하지만 HTML5 또는 Flash와 같은 브라우저 기능 만 보여줍니다.
다음은 각 장치 유형마다 다른 클래스를 표시하는 jQuery의 UserAgent 솔루션입니다.
/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
var ua = navigator.userAgent;
var checker = {
iphone: ua.match(/(iPhone|iPod|iPad)/),
blackberry: ua.match(/BlackBerry/),
android: ua.match(/Android/)
};
if (checker.android){
$('.android-only').show();
}
else if (checker.iphone){
$('.idevice-only').show();
}
else if (checker.blackberry){
$('.berry-only').show();
}
else {
$('.unknown-device').show();
}
}이 솔루션은 Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/의 솔루션입니다.