본문 바로가기

메모장/모바일

반응형사이트 제작시 간편하게 그리드 잡는 플러그인(?) Flexible Grid System               2014.11.7.  
다음에서 제공하는 모바일기기별 Mobile Device, 해상도별 Resolution 미리보기 서비스, 트로이 Troy 포털사이트 다음에서 제공하는 기기별 미리보기 서비스     다음에서 이 서비스가 나온지는 언제인지는 모르겠으나   저는 꽤나 시간이 지난 후에나 알게 되었습니다.^^;   유용한 것 같아 스크랩 하려고 포스팅합니다.   화면의 왼쪽을 보시면 현재 나와있는 모바일 기기들의 제조사별 해상도가 있으며,   확인하고 싶은 기기를 선택 후 오른쪽 상단에 있는 URL에 웹사이트..
[자바스트립트, Javascript] 디바이스 Device 별 체크 스크립트   [자바스트립트, Javascript] 디바이스 Device 별 (모바일, PC) 체크 스크립트       <script type="text/javascript"> //check browserfunction checkBrowser1(){ /* document.write("애플리케이션 이름 : " + navigator.appName+ "<..
모바일 웹사이트 주소창 자동 숨기기 스크립트   모바일 웹사이트 주소창 자동 숨기기 스크립트 아래 코드를 해당 페이지에 삽입하시면 됩니다. <script type="text/javascript"> window.addEventListener('load', function() { window.scrollTo(0,1); }, false);//주소창 숨기기 </script>
안드로이드 개발시 주의점 중 dp, dpi, px 의 개념 대해 dp란 어쩔때 사용하는 것일까? 단순히 px을 dp로 변환하고자 한다면 dp = px * 0.66625로 계산한다.(해상도480*800 기준) 480*800 px => 320*533 dp이다.   dp (dip, density independent pixel) 은 안드로이드에서 여러 화면 크기를 서포트 해주기 위해서 만든 유닛이다. 만약 많은 화면에서 내가 만든 레이아웃이 제대로 보이길 원한다면 dp를 써서 화면..
안드로이드 UI 개발 노하우 및 트렌드 분석
Customize Android Browser Scaling with target-densityDpi Customize Android Browser Scaling with target-densityDpi Webkit 사용 브라우저들 이미지 뭉개지는게 DPI 조정 때문이었구나. 메타 태그를 쓸 때 target-densityDpi를 device-dpi로 지정해주면 된다. 물론 이후의 가변폭을 위한 스케일링 같은건 자기가 알아서 해야한다. 자세한건 링크 참조.출처 : http://khrislog.net/post/3873961648/customiz..
아이폰 관련 가로,세로 모드시에 선택적 CSS파일 가져올수 있도록 하는 자바스크립트 아이팟터치/아이폰 ( 4세대 미만 ) 에서는 보통 가로 320 px, 세로 480 px 입니다. 그러므로 CSS파일 2개를 제작해주셔야합니다. 하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후 가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로 다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다. 소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다. <link rel="StyleShe..
모바일 웹 사이트 개발 시 기본적 선언부분 출처 - http://w-rn.tistory.com/23 모바일환경을 위해 html,php 페이지 에 작업을 해주셔야할것이 있습니다. 선언시에는 PC와는 다르게 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 으로 선언해주셔야합니다. 동적인 HTML 페이지를 만들기 위해..
모바일 웹디자인 시 png에서 8bit, 24bit 차이와 용량을 줄이는 방법 출처 - http://blog.naver.com/khihaho?Redirect=Log&logNo=50003988002
[모바일웹] 모바일 UX 디자인에 대한 명쾌한 요약본 출처 - http://naebon.blog.me/150095762460 모바일UX디자인 실무 - Juan Sanchez     모바일 웹을 준비하려먼 개발도구도 잘 알아야되겠지만, 그 보다 먼저, 기획의 일련의 과정으로 사용자를 전적으로 배려한 UX디자인에 대한 의견이 정해져야 하겠습니다. 앱을 만들고 유튜브에 홍보 동영상을 올린다던지, 홍보용 트위터를 만드는 것도 좋지만 가장 큰 앱 홍보는 앱UX 가 아..
[Mobile] 모바일 웹 개발, 화면 확대 방지 viewport 출처 : http://htglss.tistory.com/66 모바일 웹을 개발하기 위해서는 일반 컴퓨터 환경과는 약간 다르기 때문에 고려해야 할 사항들이 몇가지 있습니다. 오늘은 처음으로 모바일 웹에 대해 이야기 하고자 하는데요. 모바일 웹이 일반 웹과 다른 것 중 가장 중요한 것은 접속하는 환경적인 차이가 너무 확연하게 크다는 것입니다. 이미 웹 표준이 대두되면서 크로스브라우징 문제가 많이 있었는데요. 우리나라의 인터넷 익스플로러 기반으로 개발된 ..
모바일 사이트 제작 시 참고할 만한 사이트 http://www.mobileawesomeness.com/
사파리 개발자용 모바일 화면(아이폰) 설정 1. 사파리 브라우저 설치 후  2. 상단메뉴 : 편집 > 기본설정 > 고급 (메뉴 막대에서 개발자용.. 체크)   3. 상단메뉴 : 개발자용 > 사용자 에이전트 > mobile safari 4.0.2-iphone 체크!
우리가 모바일 웹사이트(Mobile Web Site)을 만들어야 하는 이유... 1.Google has a separate index for mobile content. 구글은 모바일콘텐츠를 따로 검색한다.  2.Your regular website is not going to cut it. 기존웹사이트는 모바일에 최적화되지 않았다. 3.1/5 of Americans access the mobile web each day. 미국인 5명중1명은매일 모바일웹에접속한다. 4.Mobile web will overtake t..
모바일 웹디자인 시안, 갤러리 사이트 http://cssiphone.com/    http://mobify.me/gallery/    http://www.tappgala.com/   http://www.meetemplates.com/ 템플릿을 파는 곳, 모바일 디자인은 위젯 디자인에 응용해도 좋음