모바일 프런트엔드 개발 요약

웹앱이라고도 알려진 모바일 프론트엔드 개발은 주로 아이폰, 안드로이드 등 고급형 휴대폰을 대상으로 합니다.

1. 사용자 화면 회전을 비활성화합니다.

절대 불가능합니다. 화면 회전을 비활성화해야 하는 프로젝트가 있었기 때문에 온라인에서 많은 정보를 확인했는데 웹킷의 모바일 버전에서는 전혀 불가능한 것으로 나타났습니다. . Apple API는 또한 사용자가 Safari에서 웹을 정상적으로 탐색하려면 사용자의 기기가 어떤 방향에 있을 때 Safari가 웹 콘텐츠를 정상적으로(즉, 적응형) 표시할 수 있는지 확인해야 한다고 설명합니다. 방향 변경 이벤트는 브라우저의 방향 변경 이벤트이므로 iOS에서는 방향 변경 이벤트 차단을 금지하고 Android에서도 마찬가지입니다. 화면 회전을 금지할 수 없으므로 웹앱에서는 이를 수행할 수 없습니다. 그러나 방향 변경 이벤트를 사용하여 방향을 결정할 수 있습니다. 가로 화면의 표시 모드와 세로 화면의 표시 모드는 두 가지 스타일로 작성할 수 있습니다.

2. 웹킷 커널의 프라이빗 메타태그

1. <메타 콘텐츠="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0" 이름="뷰포트" />
2. <메타 콘텐츠="검정색" 이름="apple-mobile-web-app-status -bar-style" />
3. <메타 콘텐츠="예" 이름="apple-mobile-web-app-capable " <메타 콘텐츠="전화=번호" 이름="형식 감지" />
4. (1) 가장 중요한 것은 문서 너비와 장치 너비를 1:1로 유지하고 최대 너비를 1.0으로 유지하고 화면 크기 조정을 금지하는 것입니다. (2), 아이폰의 자체 브랜드, 아이폰 상단의 상태 표시줄 스타일. (3), 이는 전체 화면 탐색이 가능한 iPhone 전용 라벨이기도 합니다. (4) 숫자를 전화번호로 자동 인식하지 않도록 설정하면 iPhone에서 일련의 숫자가 파란색으로 표시되고 스타일에 다른 색상을 추가해도 적용되지 않으므로 더 유용합니다. 3. Android의 이메일 주소 자동 인식 제거 Android에는 자동 이메일 인식 기능이 있지만 Apple에는 없습니다. 메일함 인식 기능을 제거하려면 헤드에 메타태그를 추가하세요.

<메타

콘텐츠

=

"email=no"

이름

=

"형식 감지"

/>

1. 4. Android 및 iOS의 URL 주소 표시줄 제거 setTimeout(scrollTo,0,
0

,

0

);

1. window.onload에 이 문장을 넣어주시면 됩니다. (참고: WEB 프론트엔드 http://www.linzenews.com/program/web/2773.html)