비 휴대 기기에서 액세스 할 때 jQuery Mobile을 끕니다.

Question

여기 내 상황입니다. JQM 컨트롤을 사용하는 웹 사이트에서만 작업하고 있으며, 사이트가 데스크톱이나 모바일 장치에서 사이트에 액세스하는 경우 문제가되지 않습니다. JQM 컨트롤을 사용하고 있습니다. 나는 ASP.NET 그래서 코드 내부의 일반적인 컨트롤은 다음과 같이 사용하고 있습니다 :

<asp:Button runat="server" data-theme="b" data-icon="check" data-mini="true" SkinID="btnSelectMiniB"/>  
<asp:Button runat="server" data-theme="b" data-icon="arrow-r" data-iconpos="right" data-mini="true" SkinID="btnViewMiniB"/> 
<asp:DropDownList runat="server" data-theme="b" SkinID="ddlThemeB"></asp:DropDownList> 

나는 나에게 새로운 웹 사이트를 만들지 않고, 비 모바일 기기를위한 새로운 스타일을 통합 할 수있는 기술이 필요합니다. 내 웹 사이트에 모바일 브라우저를 통해 액세스하는 경우 JQM 스크립트와 CSS을 어떻게 사용할 수 있습니까? JQM (여하튼)을 끄면이 data 태그가 문제가 될 수 있습니다. 다른 수중 석기가 나타날 수 있습니까? 그러면 모바일 장치를 통해 사이트에 액세스 할 때 데스크탑 스타일을 무시해야하는 상황을 어떻게 처리 할 수 ​​있습니까?

코드 스 니펫이있는 시작 팁은 누구나 환영합니다.

Answer 1

편집 : 모바일 또는 데스크톱 stackoverflow how to detect mobile가, 모더 나이저 당신이 필요로 할 때 JQM JS와 CSS를 삽입하는 데 사용할 수있는 yepnope.js라는 동적 스크립트와 CSS를 로더와 함께 제공 여부를 감지 한 후 아직 모더 나이저 유틸리티 API를 사용하는 경우 . 예를 들어, require.js, LAB.js 등의 대안이 있습니다. 필요에 맞게 선택해야합니다.

Answer 2

사용자가 모바일 장치에 있는지 여부를 감지 할 수있는 신뢰할 수있는 방법이 있다고 가정 할 때 desktop 및 mobile (결국 타겟으로 사용하는 경우 tablet) 전용 클래스를 만들고 html 태그에있는 클래스의 존재 여부에 따라 자바 스크립트를 설정/해제합니다. 이는 Modernizr에서 수행 한 것과 같습니다. 당신이 당신의 응용 프로그램을로드하는 클래스가 있으면

, 당신은 다음과 같은 조건에서 모바일에 대한 모든 자바 스크립트를 넣을 수 있습니다 :

if ($('html').hasClass('mobile')) { 
    // load mobile js 
} 

또는 desktop 및 tablet에 대한

if ($('.mobile').length > 0) { 
    // load mobile js 
} 

같은

.

당신이 당신의 응용 프로그램과 함께로드 이러한 클래스를 얻을 수없는 경우에, 당신은 응답 방식을 통해 서로 다른 자바 스크립트를 실행할 수 있습니다 : 나는 최선의 방법으로이 작업을 수행 할 경우

// calculate viewport width 
function responsive(){ 
    var scaffolding = ''; 
    var w = parseInt($(window).innerWidth(), 10); 
    if (w < 480) { scaffolding = 'mobile'; } 
    if (w >= 480 && w <= 980) { scaffolding = 'tablet'; } 
    if (w > 980) { scaffolding = 'desktop'; } 
    return scaffolding; 
} 

if (responsive() == 'mobile') { 
    // load mobile js 
} 

if (responsive() == 'tablet') { 
    // load tablet js 
} 

if (responsive() == 'desktop') { 
    // load desktop js 
} 

것은, 내가 별도의 것 두 가지 솔루션에서 관련 자바 스크립트 만 실행 되더라도 모든 것이 여전히로드되고 (대역폭을 청구 할 것이므로) 제안했기 때문에 이미 서버 측의 데스크톱 리소스에서 모바일 리소스를 사용할 수 있습니다. 하지만 그 종류의 솔루션은 현재 설정에 대한 통찰력을 필요로합니다 ...

Answer 3

의 touch event 감지를 사용하십시오. body 태그에 class을 추가하거나 javascript으로 테스트 할 수 있습니다. 당신이 당신의 CSS에 대한 변경 사항 미디어 쿼리를 사용하게 될 것으로

http://modernizr.com/docs/#touch

Answer 4

나는 그것이 사실 인 경우에 당신은 CSS의 변화를 감지하고 그 기반으로 jQuery를 모바일로드 할 수 있으리라 믿고있어.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    /* Styles */ 
    html { 
     background:rgb(255, 0, 0); /* red */ 
    } 
} 

$(function() { 
    var color = $('html').css('backgroundColor'); 

    if (color == 'rgb(255, 0, 0)') { 

     $.getScript("http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js", function() { 
      alert("Script loaded and executed."); 
      // here you can use anything defined in the loaded script 

     }); 
    } 
    // add additional if statements here 

}); 

Working Example

은 내가 예를 들어 배경 색상을 사용하지만 당신은 미디어 쿼리 변경됩니다 어떤 스타일을 사용할 수 있습니다. HTML5 상용구와

API Documentation for .getScript()