모바일 디자인/코딩 * 1) 기기별 디바이스의 사이즈(물리적 해상도=핸드폰의 실제 액정화면의 크기)가 다른점에 대한 고민, - 기준이 되는 모바일기기를 하나 정해서 시안을 잡는다. - 코딩시 아래의 메타태그를 삽입한다. 2) 실해상도가 다른것에 대한 고민 - 미디어쿼리로 각각의 디바이스에 맞는 해상도를 지원 - 1/2 코딩법으로 코딩:640 x 960싸이즈를 기준으로 디자인 해서 psd를 저장해두고, 그 이미지를 다시 320으로 반절 줄여서 또 psd로 저장해두고 작업함. 그 후에 320 x 480 으로 코딩(퍼블리싱)한다.*유동형 레이아웃: - 코딩시에는 해상도와 이미지가 가로세로 유동적으로 변할 수 있도록 warp같은 박스는 필요없다. - 싸이즈는 % 로 잡는다. - 단으로 구성된 부분(플롯으로 단을 형성해야 하는 부분.. WEB/Mobile 8년 전
개인적인 미디어쿼리 틀 @media all and (max-width:767px) {/* 브라우저 가로폭이 767px이하일때 적용될 css (스마트폰) */} @media all and (min-width:768px) and (max-width:1023px) {/* 브라우저 가로폭이 768~1023px일때 적용될 css (태블릿) */} @media all and (min-width:1024px) {/* 브라우저 가로폭이 1024px이상일때 적용될 css (PC) */} WEB/Mobile 8년 전
모바일/웹 분기 처리 script 1234567var UserAgent = navigator.userAgent; if(UserAgent.match(/iPhone|iPod|iPad|iPad2|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) { top.location.href = "모바일URL";}else{ top.location.href = "웹URL";}Colored by Color Scriptercs WEB/Javascript 8년 전
viewport meta 태그 모바일 웹 제작시 meta태그 설정 배경설명EDITFenec과 같은 모바일 브라우저들은 뷰포트(viewport)로 알려진 가상 "window"상에 페이지를 렌더링하는데, 보통의 경우 스크린 보다 폭이 넓어 모든 페이지 레이아웃을 억지로 작은 화면에 축소할 필요가 없다. (레이아웃을 축소할 경우 모바일 사이트로 만들지 않은 사이트들은 대개 엉망이 되게 마련이다.) 사용자들은 화면을 움직이거나 줌 기능을 이용해 페이지의 보이지 않는 부분들을 볼 수 있다.모바일 Safari는 "viewport meta" 태그를 도입해서 웹 개발자들이 뷰포트의 크기와 스케일을 조정할 수 있게 했고, 웹 표준은 아니지만 많은 다른 모바일 브라우저들도 이 태그를 이제 지원한다. 애플의 문서를 통해 이 태그의 사용법을 자세히 알 수.. WEB/Mobile 8년 전
