モバイル フロントエンド開発の概要

Webアプリとしても知られるモバイルフロントエンド開発は、主にiPhoneやAndroidなどのハイエンド携帯電話向けです。

1. ユーザーの画面回転を無効にします。

これは絶対に不可能です。以前、画面回転を禁止する必要があったプロジェクトがあったため、インターネットで多くの情報を調べましたが、モバイル版ではそれを行うことはまったく不可能でした。ウェブキット。また、Apple API では、ユーザーが Safari で通常どおり Web を閲覧できるようにするには、ユーザーのデバイスがどのような向きであっても Safari が Web コンテンツを通常どおり (つまり、適応的に) 表示できるようにする必要があるため、開発者が Web コンテンツをブロックすることを禁止していると説明しています。ブラウザのorientationchangeイベントのため、iosではorientationchangeイベントのブロックを禁止しており、Androidでも同様で画面の回転を禁止できないため、Webアプリでは禁止できません。ただし、orientationchange イベントを使用して方向を決定することは、横画面の表示モードと縦画面の表示モードの 2 つのスタイルで記述できます。

2. Webkit カーネルのプライベートメタタグ

1. <メタ content="width=device-width;Initial-scale=1.0;maximum-scale=1.0;user-scalable=0" name="viewport" />
2. <メタ 内容=「ブラック」 名前=「apple-mobile-web-app-status-bar-style」 />
3. <メタ 内容=「はい」 名前=「apple-mobile-web-app-capable」 />
4. <メタ content="telephone=no" name="format-detection" />

(1). 主なことは、ドキュメントの幅とデバイスの幅を強制的に 1:1 のままにし、最大幅を 1.0 にし、画面のスケーリングを禁止することです。

(2)、iPhone のプライベート ラベル、iPhone の上部にあるステータス バーのスタイル。

(3)。これも iPhone 用のプライベート ラベルであり、全画面での閲覧が可能です。

(4). 電話番号としての数字の自動認識を無効にすると、iPhone では数字の文字列が青色で表示され、スタイルに他の色を追加しても効果がなくなるため、より便利です。

3. Android のメールアドレスの自動認識を削除します

Androidには自動メール認識機能がありますが、Appleにはありません。メールボックス認識機能を削除したい場合は、headにmetaタグを追加してください。

1. <メタ content="email=no" name="format-detection" />

4. AndroidとiOSのURLアドレスバーを削除します

1. setTimeout(scrollTo,0,0,0);

この文を window.onload に入れるだけです。

(参考：WEBフロントエンド http://www.linzenews.com/program/web/2773.html)