Browser mobile 체크 스크립트

반응형 웹 개발 시 접속 브라우저의 모바일 여부를 체크하는 경우가 있다.
그러나 jquery의 경우 1.9 번에서 jQuery.browser 기능이 제거되었다.

이후 플러그인 또는 자체 구현한 스크립트가 생겼지만, 간단한 방법이 있어 기록한다.

var filter = "win16|win32|win64|mac|macintel"; if (navigator.platform) { if (filter.indexOf(navigator.platform.toLowerCase()) < 0) { alert('mobile 접속'); } else { alert('pc 접속'); } }

출처 : https://88240.tistory.com/393 [shaking blog]

또한 Language별로 소스코드를 제공하는 사이트도 있단다.

http://detectmobilebrowsers.com

위 사이트에서 참조하여 수정한 javascript버전 phone 과 tablet 구분 소스는 아래와 같다.

* 요약 : tablet은 표현식 조건에 "|ad)|android|playbook|silk" 추가됨.

/** * jQuery.browser.mobile (http://detectmobilebrowser.com/) * * jQuery.browser.mobile will be true if the browser is a mobile device * * If the device is a phone then $.browser.mobile > true , $.browser.tablet > true * If the device is a tablet then $.browser.mobile > false , $.browser.tablet > true **/ (function(a) { (jQuery.browser=jQuery.browser||{}).mobile=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino/i.test(a)||/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(a.substr(0,4)) }) (navigator.userAgent||navigator.vendor||window.opera); (function(a) { (jQuery.browser=jQuery.browser||{}).tablet=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|android|playbook|silk|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino/i.test(a)||/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(a.substr(0,4)) }) (navigator.userAgent||navigator.vendor||window.opera);

[jQueryMobile] orientationchange 이벤트 활용

//You can add the resize event in the event parameter of the bind function,
//if you're targeting iOS and orientationchange doesn't work.
//Since changing orientation fires the resize event too.
$(window).bind('orientationchange', function(e) {
//    if ("portrait" == $.event.special.orientationchange.orientation()) {
//        //Do whatever in portrait mode
//    } else {
//        //Do Whatever in landscape mode
//    }
    var orientation = window.orientation;
 
    if(90 == orientation || -90 == orientation) {
        //portrait
    } else {
        //landscape
    }
    
    //본문 내에 동적으로 삽입된 테이블의 width를 부모 div의 width로 적용
    $(테이블id).css("width", $(부모 div id).css("width"));
});

[출처] http://stackoverflow.com/questions/10023328/orientation-change-event-implementation-by-jquery-mobile-in-phone-gap

상단 주석 처리된 if문이 있을 때와 현재 적용된 아래 if문을 적용 했을 때 이벤트가 적용되는 시점의 차이가 있었다.
뭐가 다른지 참...
주석 처리된 부분을 적용할 경우 이벤트가 빨리 발생해 아래 css가 적용되는 시점이 실제 가로/세로
기울기 변경이 끝나기 전의 값을 읽어와 적용되는 현상이 발생한 것이다.
하여 구글링해서 현재의 window.orientation 속성을 읽어오는 것으로 기술이 되어 있다.(실제 사용하는 것은 없지만...)

[jQuery] select box 변경

jQuery를 이용하여 select box의 내용을 동적으로 변경 시...

예를 들면 sel1 이라는 콤보에 sel2라는 콤보의 데이터(options)를 jQuery로 동적으로 변경 할 때엔

$("#sel1 option").each(function() {
    $(this).remove();
});
 
$("#sel2 option").each(function() {
    $("#sel1").append("" + this.text +"");
});

또는

$.each($("#sel1 option"), function() {
    $(this).remove();
});
 
$.each($("#sel2 option"), function() {
    $("#sel1").append("" + this.text +"");
});

※ 추가로 jQuery Mobile에선 내용 삽입(append) 후 refresh를 해줘야 반영됨.
$("#sel1").selectmenu("refresh");
또는
$("#sel1").selectmenu("refresh", true);

[jquerymobile] pageinit/pageshow event

[출처] http://stackoverflow.com/questions/10538718/jquery-mobile-pageinit-pagecreate-not-firing

... 중략 ...

답변 1 :

You're checking for the wrong events, pageinit and pageshow are what you should be concerned about.

pageinit fires everytime a page is loaded for the first time, jQM caches pages in the DOM/memory so when you navigate back from two.html to one.html, pageinit won't fire (it's already initialized)

pageshow fires everytime a page is shown, this is what you need to be looking for when you navigate back from two.html to one.html

Together you can pull off a lot of clean code, use pageinit for initializing, configuration etc and update your DOM to the initial state. If you have dynamic data on the page that may change between views, handle it in pageshow 
 

Here's a good design for larger websites that we use in a production environment:

1. bind a live event to all pages/dialogs pageinit and pageshow events in some include that is on every page:
   $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
2. I reference each page with a name: In this live event you can basically have a switch statement for each page "name", and then check event.type for pageinit/pageshow or both and put your code there, then every time a page is created/shown this event will be fired, it knows what page triggered it and then calls the corresponding code
3. Now no matter what entry point a user lands on your site, all the handlers for all the pages are loaded. As you may already know, when you navigate to a page, it only pulls in <script/> within the div[data-role="page"] - ignoring any JS in the <head/>, placing separate JS on each page is a mess and should be avoided in any large site I believe
4. Try not to use blanket selectors in your jQuery, e.g. $('div.myClass') since this will search all of your DOM which may have more than one jQM page in it. Luckily in the live event handler for pageinit/pageshow mentioned above, this refers to the current page. So do all DOM searches within it, e.g. $(this).find('div.myClass') this ensures you are only grabbing elements within the current page. (of course this isn't a concern for ids). Note in the pageshow event you can also use $.mobile.activePage, but this isn't available in the pageinit, so I don't use it for consistency

I eventually had too much code, so I built a handler object where each page's js is included in a separate js file and can register handlers with the live event

The drawback is that all your js for your entire site is loaded on the first page the user reaches, but minified even a large site is smaller than jQuery or jQM so this shouldn't be a concern. But if your site really is large I suppose you could look into RequireJS.

The advantage is you are no longer loading all your JS for each page through AJAX each time the user navigates to a new page. If all your JS is available on entry, you can now put debugger statements and debug much more easily!

... 중략 ...

답변 2 :

You require a thourough read of the jQuery Mobile event documentation:http://jquerymobile.com/demos/1.1.0/docs/api/events.html

The above links gives some great insight into when each of the events fire, here are a couple samples from the page:

pageinit

Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

.

pageshow

Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it: prevPage (object) A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.

To actually answer your question, don't use pageinit, use pageshow. pageshow fires on the initial showing of a page (just after the pageinit event is fired on the element) but also on subsequent visits to the page.

※ 적용 결과
한 화면(html)에 사용되는 각 page 마다 pageshow 이벤트 핸들러로 동일 스크립트를 적용함.

모바일 웹 개발 시 유용한 라이브러리

[출처] http://kindlybugs.com/240

apprise

웹뷰에서 alert / confirm 등을 사용하면 팝업 메세지에 웹 페이지 주소가 노출되는 단점 아닌 단점이 있는데, 이것이 싫다면 div 를 통한 팝업 구현이 필요하다. 그리고 iOS 4.X나 안드로이드 웹뷰에서 position: fixed를 사용할 수 없어, 고정된 위치에 팝업을 띄우는 것이 귀찮은 편인데, 이를 대신해주는 라이브러리. 반복적인 class selector 호출 등의 최적화 되지 않은 jQuery 사용이 있어, 그러한 부분을 개선하여 사용하였다.

참고 : http://thrivingkings.com/apprise/


cross-slide

Ken-burns 스타일의 사진 슬라이드 효과를 내기 위해 사용

참고 : http://tobia.github.com/CrossSlide/
참고 : 사용기 / http://blog.naver.com/ez_/140156789842


iscroll

iOS / Android 등에서 pinch to zoom / pull to refresh / overflow:scroll 를 구현하기 위한 라이브러리. 많이 사용하진 않았지만, 웹에서 사용성을 높이기 위해서는 한 번 쯤 살펴볼만 하다.

참고 : http://cubiq.org/iscroll-4


jstorage

Local storage를 사용하기 위한 라이브러리. 서버와 통신할 필요가 없는 값들을 읽고 쓰기 위해 사용하였다. 간단하고 사용하기 편리하다.

참고 : http://en.wikipedia.org/wiki/Web_storage
참고 : http://www.jstorage.info/


lazyload

화면에 보이지 않는 부분의 이미지들은 굳이 미리 서버에서 가져올 필요가 없다. lazyload를 통해 트래픽을 줄이고, 페이지 로드 시간을 단축할 수 있다. 모든 웹 페이지에서 가지면 좋은 기능이지만, 모바일 웹에서는 반드시 가져야 할 요소.

참고 : http://www.appelsiini.net/projects/lazyload
참고 : 사용기 / http://blog.naver.com/ez_/140156676013


spin.js

ajax 요청등을 보내고 기다릴 때, 흔히 볼 수 있는 activity indicator를 animated gif 등으로 처리하는 것이 일반적이었다면, spin.js 를 통해 이미지 없이 멋진 spin image를 만들어낼 수 있다. 단, 안드로이드 일부기기에서 지원하지 않는 문제가 있어 현재는 울며 겨자먹기로 animated gif 를 사용중.

참고 : http://fgnass.github.com/spin.js/


swipe

모바일 기기의 swipe 기능을 이 라이브러리를 통해 웹에서 완벽히 재현할 수 있다. lazyload와 함께 사용해, 다른 페이지에 있는 이미지들을 나중에 불러오도록 구성하면 최적. 단, 기본적으로 제공하는 callback은 webkit의 transitionEnd 시점에 발생하는 것이라, swipe를 시작하는 시점에 callback을 받으려면 몇 줄의 코드를 추가해야 한다.

참고 : http://swipejs.com/
참고 : 수정된 swipe.js / https://gist.github.com/2404749


zflow

웹에서 coverflow 효과를 줄 때 사용한 라이브러리. iOS쪽은 iPhone 3Gs에서도 충분히 부드럽고 빠르게 작동하지만, Android에서는 OS와 기기에 따라 제대로 지원되지 않는 경우가 많다. 특히 rotateY 등의 transform 적용시, 잘못된 축으로 회전된 결과가 나오므로 Android기기일 경우는 몇 가지 fallback을 추가로 작업해야 사용가능한 상태가 된다. 안드로이드에서는 크기나 회전은 제외하고, opacity를 조정하는 정도로만 사용하고 있다. 이 점만 유의하면 충분히 쓸만한 라이브러리인 듯.

참고 : http://code.google.com/p/css-vfx/


출처 : http://blog.naver.com/ez_/140157300770