모바일 웹 개발 사양 자세히 보기

다음 사양과 제안은 모두 Alloyteam이 일상적인 개발 프로세스에서 요약하고 추출한 경험을 기반으로 하며, 해당 사양은 좋은 프로젝트 사례를 갖고 있으므로 적극 권장됩니다.

글꼴 설정

산세리프 글꼴 사용

body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }

iOS 4.0+는 영어 글꼴 Helvetica Neue를 사용하며, 이전 iOS 버전은 Helvetica를 사용하도록 다운그레이드되었습니다. 중국어 글꼴은 중국어 굵은 STHeiTi로 설정됩니다. iOS 글꼴 라이브러리에 중국어 HeiTi가 존재하지 않는다는 점을 추가해야 하지만 시스템은 자동으로 시스템 기본 중국어 글꼴인 HeiTi-Simplified 또는 HeiTi-Traditional

Heiti SC Light 黑体-简 细体 Heiti SC Medium 黑体-简 中黑 Heiti TC Light 黑体-繁 细体 Heiti TC Medium 黑体-繁 中黑

과 호환되는 중국어 HeiTi를 일치시킵니다. 기본 Android 중국어 글꼴은 영어 글꼴로 선택됩니다.

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback 4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体 其他第三方 Android 系统也一致选择默认的无衬线字体

기본 상호 작용

길게 누르기 팝업 메뉴를 방지하고 선택되도록 전역 CSS 스타일을 설정합니다. 사진 속 텍스트 동작

a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } html, body { -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ user-select: none; }

모바일 성능

안드로이드 저사양 기기 성능 및 2G 네트워크 시나리오 고려

출시 전 필수 확인 사항

모든 이미지는 압축해야 합니다

화질 80%의 jpg 이미지로 변환하는 등 적당한 손실 압축을 고려하세요

큰 이미지를 여러 개의 작은 이미지로 자르는 것을 고려하세요. 배너 이미지가 너무 큰 시나리오

로딩 성능은 충분히 빠르게 열리도록 최적화되어 있습니다

데이터가 오프라인입니다. localStorage에 데이터 캐싱을 고려하세요

초기 요청 리소스 수 < 4 주의!

이미지에 CSS Sprites 또는 DATAURI 사용

외부 링크 CSS에 @import 도입 방지

작은 정적 리소스 콘텐츠 삽입 고려

초기 요청 리소스 gzip 합계 최종 볼륨

정적 리소스(HTML/CSS/JS/IMAGE)는 압축에 최적화되어 있나요?

대규모 클래스 라이브러리 패키징 방지

액세스 계층에서 Gzip 압축이 켜져 있는지 확인

이미지 대신 CSS3 사용

이미지 리소스 초과 초기 첫 화면 지연 로딩이 필요합니다.

단일 페이지 애플리케이션(SPA)은 첫 화면이 아닌 비즈니스 모듈의 로딩 지연을 고려

충분히 원활한 작동을 위해 실행 성능 최적화

iOS 300ms 이상의 클릭 방지 지연 문제 참고!

캐시 DOM 선택 및 계산

페이지 다시 그리기를 트리거하는 작업 방지

고빈도 트리거 실행을 방지하기 위해 지속적으로 트리거되는 이벤트(스크롤/크기 조정)를 디바운스

이벤트 일괄 바인딩을 피하기 위해 이벤트 프록시를 최대한 사용

JS 애니메이션 대신 CSS3 애니메이션 사용

저사양 컴퓨터에서는 CSS3 그라데이션 그림자 효과를 많이 사용하지 말고 다음을 고려하세요. 부드러움 정도 향상을 위한 다운그레이드 효과

HTML 구조 수준을 충분히 단순하게 유지하고 5개 이하의 수준을 사용하는 것이 좋습니다

CSS 고급 선택기와 와일드카드 선택기를 최대한 적게 사용

간단하게

온라인 성능 테스트 및 평가 도구 사용 안내

Google PageSpeed ​​​​온라인 평가 웹사이트 방문

대상 URL 주소를 입력란에 입력하세요. 주소 표시줄을 클릭하고 분석 버튼을 클릭하여 테스트를 시작합니다

PageSpeed에서 분석한 제안을 최적화하고 빨간색 카테고리 문제를 우선 해결합니다