본문 바로가기
728x90
반응형

모바일개발13

모바일 레이어 팝업 띄울때 스크롤 막기 레이어 띄울때$("body").bind('touchmove', function(e){e.preventDefault()}); 레이어 닫을때 $("body").unbind('touchmove'); 위와 같이 사용하면 된다. 2016. 2. 3.
안드로이드 브라우저 체크 var userAgent = navigator.userAgent.toLowerCase(); if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1)){ alert("안드로이드폰"); } else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1)){ alert("안드로이드 테블릿"); }} 2014. 8. 18.
크롬 32 업데이트후 변화된 개발자 도구 크롬 32로 업그레이드를 하면 우선적으로 개발자도구의 많은 변화가 있다. 모바일 사이트를 만드는 개발자 입장에서는 크롬 개발자도구(F12번을 누르면나옴)를 이용해서 overrides 활용하여서 사용하는 경우가 많을 것이다. 근데 그것이 많은 변화가 이루어 졌다. 우선적으론 위치가 변경 되었다. 개발자툴의 하단에 있던 녀석이 상단으로 올라오고 항목도 변화가 생겼다. 여기에 Setting 버튼을 누르면 아래와 같이 오버라이드가 변경된것을 볼 수 있다. 이제 오버라이드를 사용할려면 저기를 체크해놓아야 한다. 체크후 다시 개발자도구를 보면 환경설정 옆에 버튼이 하나 더 생긴걸 볼 수 있다. 그것을 누르면 아래에 하나의 개발자 도구 창같은 녀석이 더 생기는 것을 볼 수 있다. 거기에서 Emulation을 클릭하면.. 2013. 12. 18.
안드로이드 input type 과 placeholder Input에 여러가지 타입이 있다. 각 타입마다 placeholder를 사용할 수 있을까~? 라는 생각과 함께 실제로 적용중에 안드로이드만 안나왔다 바로 number타입에서 였다. 그래서 모든 속성에 직접 넣어 확인해 보았다. placeholder는 어느 속성까지 지원을 하는지.. 테스트 한 폰은 아이폰4(IOS5), 안드로이드 (갤럭시S 2, ICS) 이다. 아래표는 테스트 결과이다. 속성 아이폰 안드로이드 text OO number OX emailOO password OO telOO search O O url O O date X X datetime X X month X X week X X time X X datetime-local X X 대충 이정도 지원을 한다. 혹시 저처럼 왜 ? 안되지 라는 고민.. 2012. 8. 7.
모바일웹 Iscroll carousel 구현하기 1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.2. A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.Zeroth Law: A robot may not harm humanity, or, by inaction, allo.. 2012. 7. 17.
[펌] Mobifying Your HTML5 Site ※ 잘못 번역된 내용이 “당연히” 있을 테니 참고해서 읽으세요. 번역 오류나 개선, 오타에 대한 피드백은 언제나 환영하고 감사드립니다. ^^"Mobifying" Your HTML5 Site당신의 HTML5 사이트를 “모바일화”하기Written by Eric Bidelman - Developer Relations, Google on March 3, 2011Translated by GyuCheol Choi(gc8134.choi@gmail.com) on March 9, 2011원문 보기개요모바일 웹 개발이 최근 화두가 되고 있다. 최초로 올해에는 스마트폰이 PC보다 더 많이 팔릴 것이다. 더 많은 사용자가 웹 서핑을 위해 모바일 장치를 사용하게 될 것이고, 이것은 개발자들은 그들의 사이트를 모바일 브라우저에 .. 2012. 4. 30.
[펌] 한글 우측 의문의 공백 해결하기 iOS, 안드로이드 OS 등 모바일 단말기의 브라우저에서 한글 렌더링시 하나의 공통점이 있습니다.한글 텍스트 우측에 의문의 공백이 발생한다는 것입니다.텍스트에 background-color를 지정해보면, 텍스트 노드 자체에 공백이 포함되어 있음을 확인할 수 있습니다. 특이하게도 이 공백은 글자수가 늘어날 때마다 2px씩 증가합니다.따라서 한글 우측에 다른 인라인 요소가 올 경우 간격이 이상해보이거나, 가운데 정렬시 왼쪽으로 치우쳐보이는 문제를 가지게 됩니다. (디자이너로서 용납이 안될때가 있죠~!) body의 font-size가 14px이거나 17px 이상일 경우 위 현상이 발생하는데요, 자, 어떻게 하면 해결할 수 있을까요? 해결방법 : 텍스트의 부모 엘리먼트 안쪽 양측에 공백 삽입 - 변경전 : 신동.. 2012. 3. 22.
모바일웹 viewport 관련 이란 뷰포트를 가장 많이 쓸것이다... 하지만 디자이너 320 이미지가 아니라..640 , 480 등의 사이즈로 이미지를 주었을때 min-width등으로 320을 주고~ max-width:100% 형태로 작업을 했다고 하자... 아이폰에서 가끔 정상적이지 않아서 강제로 사이즈를 형태로~~ 바꿀때가 있을것이다.. 이렇게 한경우에 갤럭시 S에서 동일하게 나오지 않는다...;; 근데 결론부터 얘기하면 이렇게 바꾸면된다..;; 왜그런지는 정확히 모르겠다..;; 흠..;; 2011. 4. 21.
iphone 메타 태그 deviece view port viewport 를 지정하지 않으면 980px가 된다. user-scalable=no/yes : 사용자가 확대 축소를 허가 할지 안할지를 정한다. initial-scale=1.0 : 기본 확대 배율이다. 이것을 이용하여 살짝 큰 이미지의 기본확대배율을 0.75정도로 조절하여 사용할수있음 maximum-scale=1.0 최대 확대 배율이다. 얼마까지 배율을 증가시킬수 있을껀지 결정한다. minimum-scale=1.0 : 최소 확대 배율이다. 얼마까지 와이드? 시킬껀지를 결정한다. 2010. 10. 20.
MVC 모델 MVC 모델의 기초 골격 Model View Controller로 구성되는 MVC모델은 Controller에서 요청받은 Model에서 메소드 처리 후 View페이지로 넘겨주어 출력하여 구동-처리-출력으로 역할을 나누게 된다.요청이 들어오면 Controller는 어디로 넘겨주어야 할지 결정하게 된다. 이는 web.xml을 참조한다. 클래스이름해당클래스 클래스이름/url패턴/url패턴의 주소로 요청이 들어오면 Controller는 web.xml의 설정에서 해당 url패턴을 찾아 해당 url패턴의 servlet 이름을 찾아 해당 클래스를 실행한다. 이 클래스는 servlet으로 만들어진 페이지이다.import!! javax.servlet.*;import!! javax.servlet.http.*;public c.. 2010. 10. 15.
모바일 웹앱 개발자가 알면좋은 43가지 UX , UI http://www.uxbooth.com/blog/essential-controls-for-web-applications/ 2010. 10. 15.
url status창 없애기.. 아이폰 주소창 없애기 스크립트 $(document).ready(function(){ setTimeout(scrollTo, 0, 0, 1); }); 2010. 10. 15.
728x90
반응형