터치 스크린 휴대 전화 웹사이트 디자인

스마트폰과 안 드 로이드에서 붐과 함께 사파리 및 크롬 기반 터치 스크린 모바일 웹 사이트는 웹사이트입니다.
중국에서 터치 스크린 모바일 웹 사이트는 여전히 업계의 현재 상황에서 시작 단계, 경험 하지도, 저자는 장비, 시스템, 브라우저, 네트워크, 터치 스크린 휴대 전화 웹사이트 디자인 4 차원에서 있을 것입니다.

I. 장비

• 해상도 화면 크기
• 터치 스크린 컴퓨터의 대화형 기능
• 성능

1. 해상도 디자이너는 사이트를 할 때 문제, 아이폰/아이팟 터치의 첫 번째 고려 사항은 현재는 2 해상도: 480 * 320, 960 * 640, 실제 화면 크기가 3.5 인치, 안 드 로이드 오픈 소스 시스템, 많은 제조 업체, 해상도 결과 이기 때문에, 화면 크기는 매우 큰, 하지만 현재 주류 해상도: 480 * 320, 800 * 480, 480 * 320 표준 디자인으로 하는 것이 좋습니다 위의 상황에 따라 (큰 해상도로 설계 된 클라이언트 권장) 적응의 경우 가로 화면을 고려 하는 동안.

2. 터치 스크린 휴대 전화 사이트 손가락 클릭의 터치에 맞게 이상적인 행 높이 설정 해야 하므로 개체를 직접 조작 하 여 특징입니다.
Lukew.com에서 터치 클릭 차원 데이터:
검지 손가락의 간격 약 7 * 7 m m, 1mm입니다.
손가락 클릭 간격은 약 8 * 8 m m, 2 m m 간격, 현재 권장 값은 9 m m, 최소 7 m m 미만 해서는 안됩니다.
목록 옵션 사이의 최소 거리는 5 m m 이상 이어야 한다.
설계 과정에서 밀리미터를 픽셀로 변환 해야, 화면 해상도 변환 결과의 다른 크기는 동일, 참조 변환 내가 생각 하는 방법 (DPI 및 픽셀, 센티미터, 인치 관계 및 변환 및 CSS 단위의 길이): 최소 표준 디자인 5 m m 수, 테스트에 따르면 높은 사용률 속도 증가 시킬 수 있다.

모바일 입력된 xuan.3g.cn 경험 3 세대 포털 밝은 버전

3. 휴대 전화의 하드웨어 및 네트워크 환경을 PC에 비해 여전히 모바일 사이트는 고도로 최적화 된 페이지 성능을 해야 하므로 큰 차이 있다:
페이지 파일 크기를 제어, 너무 많은 사진을 사용 하지 마십시오, HTML과 CSS CSS 압축 도구를 표준화 하려고
서버 요청을 최소화, 사용 하는 몇 가지 특정 CSS 페이지 파일에 직접 작성할 수 있습니다 CSS 정신...
페이지에서 특정 최적화의 성능 2 명확 하 게, 말할 수 없는 세 단어는 여기만 토론을 하기 위해 오신 추가.

Ii입니다. 시스템

· UI 스타일
플래시

1. iOS와 안 드 로이드 OS는 상당히 다른 디자인 스타일과 상호 작용, 고 다중 플랫폼 (웹 사이트 플랫폼에서 사용할 수 있으며 개발 및 애플 리 케이 션에 비해 유지 보수 비용을 줄일 수), UI의 세트를 고려 하면 과도 한 문체 편견과 잘못 된 디자인과 충돌 하지 마십시오. 지침 세부 사항:
아이폰 HMI 디자인 가이드
안 드 로이드 HMI 가이드

2. iOS 플래시, 자바, svg, 안 드 로이드 OS 지원 flash10.1 지원 하지 않는 버전, 위에 것이 좋습니다 GIF 애니메이션을 사용 하 여.

셋째, 브라우저

• 기능 바
• 캐싱
· HTML 및 CSS
· 자바 스크립트

1. 아이폰 브라우저는 결함이 있는 하드웨어를 만드는 기능 바와 함께 온다.
여기 특별 한 기능은 iOS의 바탕 화면에 웹 사이트를 추가 하 고 응용 프로그램 아이콘을 생성:
< 연결 rel = "애플 터치 아이콘" href = "Icon.png"/ >
Icon.png 그림은 사각형, 크기 57px * 57px, iphone4 114 * 114.

2. 여기는 캐시 구성 요소 캐싱 및 페이지 캐싱 나누어, 건물 캐시 사이트 요소 참조: 사진, CSS, 자바 스크립트, 등, 설계 및 개발 페이지의 구성 요소와 페이지 브라우저의 캐시 크기 초과 하지 않도록 주의 하에서 저장 하는 별도 엔터티로 전체 페이지는 페이지 캐시:

3. PC에 측면 먼 HTML5와 CSS3에에서 나타납니다, 몇 가지 실제 c s s 3의 다음 소개 모바일 터미널 데뷔
그라디언트: Webkitgradient (선형, 왼쪽 상단, 왼쪽 하단, 색상 정지점 (0.3, RGB (255,255,255)), 색상 정지점 (0.75, RGB (239,242,252)) );
Fillet:-webkit-border-top-right-radius:4px;
고급 선택기:. 목록 > P:last-아이 {배경 이미지:
텍스트 해상도 증가 하면 중력 유도 방지:-웹 킷-텍스트-크기-조정: 없음;
마스크 입력된 상자 기본 필렛 및 shadow:-webkit-border-radius:0;-webkit-appearance:none
드롭다운 상자 기본 스타일 제거:-웹 킷-국경-반경: 0; -웹 킷-외관: 없음;
사파리 공식: HTML CSS

4입니다. 자바 스크립트

브라우저 주소 표시줄 숨기기:
Window.addeventlistener ('로드', 함수 () 없음
settimeout (함수 () 없음
Window.scrollto (0, 1);
}, 100);
});

휴대 전화 식별:
var isandroid = Navigator.appVersion.toLowerCase (). IndexOf ('안 드 로이드') > = 0,
Isiphone = Navigator.appVersion.toLowerCase (). indexOf ('iphone') > = 0;
경우 (isandroid)
{
Window.location.href = "xxx.html";
}

아이폰 전체 화면 표시:
< 메타 이름 = "애플 모바일-웹-애플 리 케이 션-호환" 내용 = "yes" / >

Iv입니다. 네트워크

· GPRS
3 세대
· WIFI

1. 속도 관세에서 GPRS는 가장 느린 가장 비싼 모바일 인터넷 페이지에서 네트워크 환경은 의심의 여지가 가장 지적인 선택, 제안 페이지 파일 크기 하지 초과 25 K (후 gzip) 특정 테스트 데이터 반복 되지 않습니다.

2.3 G 카드 속도가 WiFi 속도 보다도 좀 더 가까이 하지만 수수료 문제가 있다.

3. 모바일 단말기는 PC와 웹 사이트에 액세스의 비용에 해당 하는 와이어 무료 네트워크를 통해 고정된 광대역에 연결 되어 있는지를 이해할 수 있는 우리는 WIFI
우리가 할 수 있는 가장 적절 한 경험을 가진 사용자를 제공 하기 위해 일부 일치 하는 네트워크의 위의 3 종류에 따라:

출처: http://ued.3g.cn/?p=78