エンドモバイル開発のヒントを知っている必要があります

序文

最近、会社でのハイブリッドアプリのプロジェクトを書いて、ページはすべて基本的にネイティブのWebViewの下に埋め込まれた、H5で行われます。ページをブロックしますアップルの携帯電話のiPhone 6ステータスバーの問題を発見して、いくつかの解決策を見つける問題を解決するためのメタタグを追加することが最終的にオンラインダウンページ、スタイルの混乱を引き起こします。今日の一般的な携帯端末の開発を要約すると、特別なメタタグやいくつかのヒントに注意を払う必要があります。

1. ビューポート

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

これは、レイアウトビューポートを調整するために使用されるラベルのモバイル側のページを、開発が不可欠である禁止されているなど、ビジュアルビューポート、ページズーム、と一致しています。

1. apple-mobile-web-app-capable

apple-mobile-web-app-capable 設定されているWebアプリケーションは、フルスクリーンモードで実行されています。

構文：

<meta name="apple-mobile-web-app-capable" content="yes">

説明：

コンテンツがyesに設定されている場合は、Webアプリケーションは逆に、フルスクリーンモードで実行されます、しません。コンテンツのデフォルト値はありません、通常の表示を示しています。あなたはフルスクリーンモードを実行することを選択した場合、Appleは、デフォルトのツールバーとメニューバーを削除します。

私が遭遇した問題では解決するmetaタグを設定することによって開始されます。

1. 上部のステータスバーの色を設定します。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

説明：

このラベルは、フルスクリーンモードのWebアプリケーション、IIメタタグは、特に指定が同期させる必要があり、すなわち条オンにする必要があります前提に動作しますが、このラベルは動作しません。

コンテンツがデフォルトに設定されている場合は、ステータスバーが正常に表示されます。空白に設定すると、ステータスバーには、黒い背景を持つことになります。あなたは空白半透明、黒の半透明のステータスバーが表示さに設定されている場合。デフォルト、または空白に設定すると、そのページはブロックされ、他のカバーせずにステータスバー、トップ部分によって占有され、ステータスバー、ページによって占められ、底部、またはその両方の下に表示されます。ブランクが半透明に設定すると、ページが画面いっぱいになる、ページの上部をカバーする（ページが20ピクセルの高さをオーバーライドし、iPhone4のとitouch4網膜画面40ピクセル）のステータスバーです。デフォルト値はデフォルトです。

1. Webアプリケーションは、（新しいiOSの6）、メイン画面の後にタイトルに追加しました

<meta name="apple-mobile-web-app-title" content="title">

1. キャッシュ設定

<meta http-equiv="Cache-Control" content="no-cache" />

するためにサーバに要求を再送信するのではなく、常に最初のロード後にキャッシュされる携帯電話のページは、その後、各リフレッシュは、キャッシュを使用します。あなたはキャッシュを使用しない場合は何もキャッシュを設定することはできません。

1. フォーマット検出

フォーマット検出は、自動識別のページ番号を有効または無効にします。

構文：

<meta name="format-detection" content="telephone=no">

説明：

デフォルトでは、デバイスは自動的に電話番号であるかもしれない任意の文字列を認識します。電話=いいえを設定すると、この機能を無効にします。

1. HTML5 IOSやAndroidコールダイヤル機能

HTML5は、TELがHREF限り、タグを追加し、自動呼ダイヤルラベルを提供します：それは。

直通電話、次のように：

<a href="tel:15677776767">点击拨打15677776767</a>

PS：あなたはこのような状況で障害が発生した発生した場合、あなたはyesに、ページヘッダーにコンテンツをmetaタグを追加することができます。

1. 影にデフォルトで表示される入力ボックスでiPhoneとiPad。

Element{
  -webkit-appearance: none; 
}

1. ジッタモバイルエンドスライドページ絶対配置要素

この問題は、オンラインで自分では参考のためにいくつかの解決策を見つけることができます。

• 身長は100％に設定します

body,html{
    widht:100%;
    height:100%; }

プロジェクトはすでに直接このプロパティを設定し、他の効果があり、ページを行っている場合は、そのページの他の機能に影響を与える可能性があります。

この方法を使用する場合は、貧しい地域のデバッグの効果が推奨されていません。

• 要素に追加された固定transformプロパティを配置

transform:translateZ(0);
若しくは
transform:translate3d(0,0,0);

• 巣箱の外

固定された固定位置する外側層、内側層は、絶対絶対位置に配置され、箱の別の層を付加します。

<div style='position: fixed;'>
  <div style='position: absolute'> ... </div> </div>

1. 拡張されたiPhoneの入力フレームポインタ

iPhoneでの長い入力フレームポインタ入力、適切にAndroidのディスプレイ。

方法：

行の高さのスタイル値が低い入力タグ。

1. IOSの次のページのスライドケイトン、滑らかではありません

転動体のCSSスタイルに設定し、慣性スクロール効果を達成するための柔軟性がコンテンツに表示されます。

{
  -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling 属性制御要素スクロールスプリング2つの値を持っているモバイルデバイス、上のバック効果かどうか：

auto：使用普通のローリングは、指がタッチ画面から削除されたときに、スクロールはすぐに停止します。

touch：
指がタッチスクリーンから削除されたときにスクロールがリバウンド効果を持って使用し、コンテンツがいくつかの時間のための効果をスクロールし続けます。スクロール速度は、スクロールやジェスチャーの持続時間と強度に比例する続行。しかし、また新しいスタックコンテキストを作成します。

1. 固定的に固定ページコンテンツのシールド部を配置ページ要素または下部要素の上部に配置されます。

この方法の一つ：

最も外側の層に結合されたDIVは  padding-bottom、位置決め要素の高さに固定されています。

方法2：

擬似要素を使用して、最も外側の層は、固定された位置決め要素の高さに、後に高さをダミーDIV要素を追加します。

.wrapper::after{
  content: '';
  height: '固定定位元素高度'; }

1. テキストを選択、コピーすることは禁止

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none; }

1. IOSは、キーボードイベントは、KeyDownイベントkeyUpイベント入力で、キー入力のサポートは非​​常に良いではありません

、入力された検索時間とあいまい検索を行い、キーボードキーワード内入力し、クエリのAjaxのバックグラウンドを経由して、その後、そのデータ、赤でキーワードによって返されたデータを返します。入力キーボードでからkeyupイベントを聞いた後、アンドロイドでのモバイルブラウザは可能ですが、赤IOSのモバイルブラウザは、以下を削除することによって、ないすぐからkeyupイベントは、それぞれに対応した入力方法により、非常に遅く、入力されました！

ソリューション：

HTML5からkeyup oninputイベントを交換するために使用することができます

<input type="text" id="test">
<script type="text/javascript"> document.getElementById('test').addEventListener('input', function(e){ var value = e.target.value .... }) </script>

keyUpイベントは、その後、同様の効果を実現します！

1. JavaScriptコードのWebViewの下部はないような警告（）など、実行します。

ソリューション：

WebViewのちょうどキャリアは、達成するためにwebviewChromClientをレンダリングするさまざまなコンテンツを使用する必要があり、そのクラスWebChromeClientベースラインのデフォルトセット。

PS：このセクションでは、コードをネイティブ基本クラスWebChromeClientを開発するために提供される支援を必要とします。

WebView.setWebChromeClient()

1. モバイルエンドは300msの遅延をクリックします

300msのは許容可能であるが、300ミリ秒を生じる問題のために、我々は解決しなければなりません。300msのユーザーエクスペリエンスは、この問題を解決するために、我々は一般的にタップイベントとクリックイベントを交換する側に移動し、非常に良いではありません。

これは、2つのjs、1推奨  fastclick、一つ  tap.js。

詳細を参照して説明した移動端遅延処理プログラム、クリックしてください：エンド遅延処理方式をクリックして移動します

1. エンド携帯電話の普及の問題をクリックしてください

ケース次のとおりです。

<div id="haorooms">点透事件测试</div> <a href="http://www.baidu.com">百度</a>

DIVは絶対にマスク層を配置され、及びz屈折率はより高くなります。ラベルがページへのリンクである、我々はdivの結合事象をタップする必要があります。

$('#haorooms').on('tap',function(){ $('#haorooms').hide() })

我々は、通常のレイヤーマスクのdivが消えるをクリックして、私たちはラベル上にマスク層をクリックすると、イベントを通じてポイントと呼ばれる、リンクがトリガーされた。とき

理由：

以前touchendより早くクリックよりtouchstart。トリガーのそのクリックが、私たちは非表示にするには、トリガレイヤーマスクをタップした後、約300msの中に、この時間は、その後、非表示にすることにより、レイヤーマスクに300ミリ秒後に、まだトリガーをクリックして遅れている、我々は次のようにクリックをトリガーリンク。

ソリューション：

1. クリックイベントを交換するためにタッチイベントを使用してみてください。例えばtouchendイベント（推奨）のために。

2. fastclickで、詳細はGitHubのリポジトリ上に表示されます。

3. preventDefaultとラベルをクリックしないようにします。

4. イベントを処理するために、一定の時間（300ミリ秒+）により遅延（推奨されません）。

5. より一般的に解決することができ、クリックイベントを交換することは不可能です。

次のようにここでは、いくつかのtouchendイベントです。

$("#haorooms").on("touchend", function (event) { event.preventDefault() })

1. 英語入力中国語入力方式でのiOSは、文字間のスペースの六分の一が存在してもよいです

定期的にすることによって除去することができます

this.value = this.value.replace(/\u2006/g, '')

1. 自動的にiOSのビデオタグビデオのフルスクリーン再生の問題が解決されました

ビデオのプロパティにタグを追加します。

<!-- 针对 iOS8，9下生效  -->
<video webkit-playsinline="webkit-playsinline"></video> <!-- ios10 及以上 --> <video playsinline="playsinline"></video>

PS：それは次のWebView内に埋め込まれているにもパートナーのネイティブサポートを開発する必要がある場合は、次のコードを追加します。

webView.allowsInlineMediaPlayback = YES;

1. メール、モバイル端末を送信するためのリンクをクリックしてください

<a href="mailto:[email protected]?subject=TestObject">[email protected]</a>

TestObject：テーマに、ダイレクトメールを送信[email protected]にクリックします。

PS：あなたはこのような状況で障害が発生した発生した場合、あなたはyesに、ページヘッダーにコンテンツをmetaタグを追加することができます。

<meta name="format-detection" content="email=yes">

1. スクロールエンドのモバイル普及率

説明：

　ポップオープンマスク層やローリングでは、転動体要素は、下位層に影響を与えることができます。経験は非常に悪いです。

ソリューション：

一般的なアイデアは、オープンボックスに再生されているか、マスク層、取得したHTML scrollTopスプライトは、本体に固定配置された場合、トップscrollTopスプライトの値が負の値です。固定位置決めが削除閉じるポップアップボックス。scrollTopスプライト値を復元します。

1. 携帯端末のレイアウト

これは基本的に、我々は最初のモバイル開発を特定する必要があるプログラムであり、私は一つの文章に要約しました：

REM古典的なレイアウトとレイアウト新人VW

もちろん、そのような弾性ボックス（フレックス）のような、一般的であることができるあります。

しかし、それは言われる必要がある淘宝網は、レイアウトをflexible.js著者は、我々はVWのレイアウトを使用することをお勧めしていることです。

あなたは、オンラインの関連情報へのアクセスを得ることができます。この部分は、私がここで出て疲れません。