모바일시작페이지(m.xiles.net) 업데이트: 텍스트 보기 모드 추가

My Works 2010/03/16 21:22
모바일 시작페이지(http://m.xiles.net)이 업데이트되어 텍스트 보기 모드가 추가되었습니다.

처음에는 사이트수가 좀 적었지만, 차츰 추가하다보니 조금 많아졌기도 하고
무선데이터 용량으로 고민하시는 분들을 위해 텍스트모드로 보는 옵션이 추가되었습니다.

화면 제일 아래로 내리고, '설정'을 터치합니다.


설정으로 들어가면 아래와 같은 화면이 나오고,
사이트 새 창으로 열기 옵션과 보기 모드를 고를 수 있는 옵션이 있습니다.


아래처럼 새로 추가된 사이트와 자주 가는 사이트 8개 외의 것들은 모두 텍스트로만 표시되어
아이콘 이미지로 인한 데이터전송 용량 걱정을 줄여줍니다.


각 카테고리 제목 부분을 한 번 터치하면 열리고 다시 터치하면 닫힙니다.
열거나 닫은 카테고리 상태는 기억이 되어 다음에 접속해도 동일하게 보입니다.


Posted by xiles
TAG iWebStart, xiles, 모바일 사이트, 모바일 사이트 모음, 모바일시작페이지, 사파리, 아이폰, 오페라, 옴니아
트랙백 0개, 댓글 2개가 달렸습니다

댓글을 달아 주세요

  1. 켄지군 2010/03/24 15:31  댓글주소  수정/삭제  댓글쓰기

    와우 '~' 저희도 커뮤니티 내용을 그대로 모바일사이트로 제작했는데, 혹시 등록해주실 수 있으신가요?

  2. 거품이 2010/05/25 20:42  댓글주소  수정/삭제  댓글쓰기

    노키아 n5800인데 카페에서 보고 잘정리 돼있어서 써보려고 하니 아이콘만 눌러지고 사이트로 안들어 가지네요.업뎃해서 그런건가요?

모바일 웹사이트 만들기 - DOCTYPE 및 viewport

Development/Web 2010/02/16 17:37
아이폰/아이팟용 웹사이트 만들기에서 viewport 메타태그에 대해서 언급을 했었다.
그런데 이것만으로는 모든 브라우져에서 딱 맞는 페이지가 만들어지지 않는다.

오페라 미니에서 열어보니 아래처럼 좌우 스크롤이 생기고 viewport 메타태그로 의도했던 좌우 스크롤없이 딱 맞는 페이지로 보이지 않는다.


그럼 오페라 미니에서도 제대로 좌우 스크롤 안생기고 딱 맞는 사이즈로 맞추려면 어떻게 해야 할까?
아래처럼 DOCTYPE을 XHTML Mobile 로 지정해주면 된다.


<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.wapforum.org/DTD/xhtml-mobile12.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />


HTML의 헤더 부분에 위처럼 DOCTYPE과 viewport 메타태그를 같이 사용해주면, 아이폰/아이팟에서도 좌우 스크롤 없이 꽉 찬 상태로 그리고 오페라 미니에서도 꽉 찬 상태로 보여지게 된다.

그런데 옴니아2나 기타 폰에서 오페라 브라우져를 이용해서 들어가면 폰을 세로로 세운 것을 기준으로 가로 사이즈가 다르다. 아이폰이 320픽셀이라면 옴니아2에서 오페라로 이용해보니 더 3/4 정도 사이즈로 표현이 되어 아이폰에서는 한 줄당 4개씩 보이는 것이 아래처럼 3개씩 보이는 정도의 사이즈로 보인다.



* 아이폰용으로만 만들면 사이즈와 브라우져가 통일되어 있으니 좋은데, 다른 브라우져를 맞추려면 이것도 만만찮은 일인 것 같다. 우선 오페라 미니는 http://www.opera.com/mini/demo/ 에서 시뮬레이터로 대략 돌려볼 수는 있다. 그리고 윈모바일에 IE Mobile에서도 확인하려면 윈모바일 에뮬레이터 등을 설치해서 확인해봐야 한다.

그리고 PC에서 IE6 맞추듯 아직 IE Mobile이 다른 모바일 브라우져들에 비해 좀 뒤쳐지는 경향이 있어 이것까지 맞추기는 어려울 듯 하고, 얼릉 모두 표준을 잘 지켜줬으면 하는 바램;;

모바일에서는 아무래도 작은 화면 속에 구성을 얼마나 잘하느냐가 관건인듯 하다.



Posted by xiles
TAG DOCTYPE, HTML, IE모바일, viewport, 모바일 사이트, 사파리, 스마트폰, 아이폰, 오페라, 옴니아, 제작
트랙백 0개, 댓글 1개가 달렸습니다

댓글을 달아 주세요

  1. lunazini 2010/05/13 17:00  댓글주소  수정/삭제  댓글쓰기

    좋은정보네요^^ 담아가요