モバイルページの開発H5ピットガイドを終了

オリジナルリンク： https://juejin.im/post/5dafc3df5188257a63539c64

序文

携帯端末は通常のH5開発したとき、私たちは必然的に、様々なピットが発生します、我々は長い記事を解く方法を見てみます。この記事は、コレクションへの将来のアクセスを容易にするために、お勧めです！

高エネルギーの前で！

網膜画面ブラーでキャンバス

のみ磨く必要がある画素比率に従ってスケーリングすることができます

run(canvasEl) {
    const canvas = canvasEl;
    const ctx = canvas.getContext('2d');
    const devicePixelRatio = window.devicePixelRatio || 1;
    const backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio || 1;

    const ratio = devicePixelRatio / backingStorePixelRatio;
    if (devicePixelRatio !== backingStorePixelRatio) {
      const oldWidth = canvas.width;
      const oldHeight = canvas.height;

      canvas.width = oldWidth * ratio;
      canvas.height = oldHeight * ratio;

      canvas.style.width = `$px`;
      canvas.style.height = `$px`;
      ctx.scale(ratio, ratio);
    }
  },
复制代码

絵の同じ割合でPC上で非常に明確であるが、それが何であるので電話は、非常に漠然としているのですか？

Appleは960 640 480 320のiPhone 4解像度はこれだけdevicePixelRatio = 2ページを示して置くよう研究では、携帯電話の解像度が小さすぎるためdevicePixelRatioのいたずらは、Webページの単語を表示するには、解像度に応じてすることは非常に小さいことがわかった。今、 1.5 / 2/3は、等、より鮮明な画像の背景を作るために、混沌としたAndroidは交換しなければならないimgタグ2Xこのような広いDIVとして、電話で（一般的に2倍が使用される）高い100100であります含む、比較的明確な、そのような表示された画像、コードを次のように、200,200は、背景には、背景サイズがあります。

   background:url(../images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block; 
   width:100%; 
   height:50px;
复制代码

電話番号の自動ページ認識を有効または無効にします。


复制代码

デバイスは自動的に何この機能セットは、メールアドレスとも共感を認識しません無効にする=すべてのデフォルトが電話を設定した文字列の電話番号であってもよい認識しません

H5のウェブサイトには、問題の入力タイプ=番号を設定します

番号を設定するタイプのH5ページ入力は、一般的に3つの質問があります。

質問1：MAXLENGTH属性はうまく動作しません。


复制代码

質問2：デフォルトのフォームは、丸めによって提出

 //input中type=number一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step;number中默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间
复制代码

質問3：一部のAndroid携帯電話上の問題スタイルを生じます

デフォルトの入力メソッドのスタイルを削除します。

input,textarea {
    border: 0;
    -webkit-appearance: none; //可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改
}
复制代码

[設定]を選択するドロップダウン選択問題

質問1：達成するために右整列

次のプロパティを設定します。

select option {
    direction: rtl;
}
复制代码

質問2：無効にし、デフォルトの矢印を選択

::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰

select::-ms-expand { display:none; }
复制代码

モバイルHTML5の音声自動再生の失敗を終了

AppleとAndroidのシステムは通常、トリガ自動再生の使用を禁止し、再生する前に、JSは、ユーザによってトリガされなければならないので、再生Webページが自動的に、オーディオや消費のユーザーまたは不要なトラフィックのための悪いビデオを再生するので、ソリューションをアイデア：最初は問題を操作しないで、その後JS続くトリガーtouchstartプレイや一時停止に触れるユーザー（オーディオがロードを開始するように）、によって、コードを解決します：

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});
复制代码

CSSアニメーションページ白フラッシュ、アニメーションケイトン、画像の乱れの問題

検索するために左と上の位置を使用することなく、1合成として使用することは、変換および不透明度プロパティ、CSS3アニメーションを設計します

ハードウェアアクセラレーションを入れます

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
复制代码

ボックスのフローティング要素のサブ要素親伸延高さ（BFC）

次のように解決策は以下のとおりです。

オーバーフロー1.親要素：隠されました。

表示2.親要素：インラインブロック;ら

両方の方法は、CSSプロパティフロート親要素によって本明細書に提供されるBFC（ブロックレベルフォーマットのコンテキスト）の要素となり、サブエレメントの高さは、親要素を延伸することができる、方法を使用することが好ましく、インラインブロック要素として自身が独自の気晴らし幅、高さの数が付属しています

そして、キャッシュの問題から

時には自動的特にmobilesafariで、JSを実行していないブラウザのフォールバックをクリックして、この（bfcacheが）と、キャッシュ、溶液からの関係があります。

window.onunload = function(){};
复制代码

ポジショニングピット

IOSでは、ソフトキーボードが失敗するので、最上部に位置固定し、私たちは開発中の代わりに、絶対的な団結を使用

AndriodでIOSおよび再生の問題でオーディオ要素とビデオ要素

 //音频,写法一

复制代码

IOSの電話システムが自動的にオーディオ/ビデオを再生することはできません

これはデフォルトのAppleシステムの制限は、自動再生、オーディオ/ビデオを許可しないで、あなたがプレイするトリガープレー（）イベントをタップする必要があります。そして、私たちは、ページのonloadの後にトリガイベントを再生することができます：

document.getElementById('music').play();
复制代码

十分なマイクロ文字を制限する可能性がある場合はここでは一般的に、音楽を再生することができます

質問3：マイクロメッセージの制限

マイクロ文字の制限場合は、最初のページの導入、マイクロチャネルインターフェイスを呼び出す必要があります：


复制代码

JSは、マイクロチャネルのイベントを書き込みます：

document.addEventListener("WeixinJSBridgeReady", function() {
    document.getElementById('music').play();
}, false);
复制代码

要約：

通常のPCの終わりにIOSとAndroid上で利用できないのautoplay属性1.audio要素、

2.audio要素は、IOSとAndroidで、コントロールが設定されていない場合はスペースを占有し、ChromeはPC側の任意のスペースを取りません。

質問4：Safariブラウザが自動的に再生

document.addEventListener('touchstart', function(){   
    audio.play();
}, false);
复制代码

IOSシステムは、仮死スタイル（アニメーションプレイ状態）をサポートしていません。

H5ページには、一般的にBGMを持つことになり、また、音楽を開閉するユーザーのための回転の音楽のアイコンを提供します。我々は、アイコンの位置は、ユーザが音楽]ボタンをクリックしたときに、その後、アニメーションに沿って実行するように続行する前に停止するアイコンをポイントする回転停止時にことを願っています。アニメーション-play-を状態が最も簡単な方法です、しかし、IOSをサポートしていません。

現在のソリューションは、次のとおりです。アニメーションを実行するための責任音楽アイコン、録画アイコンが停止を担当する親要素の回転値

IOSは長押しのページ要素が選択されている防ぎます

解決：コピーからユーザーを防ぐためにスタイルを追加し、一般的には、IOSとAndroidを解決することができます

-webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口
-webkit-user-select:none; //webkit浏览器  
-khtml-user-select:none; //早期浏览器 
-moz-user-select:none; //火狐 
-ms-user-select:none; //IE10 
user-select:none; 
复制代码

どれも、この属性は、溶液はCSSファイルであり、それを設定します。この理由は、-webkit-ユーザー選択の原因となっているため、あなたはIOSに問題があるでしょう、このコードを追加した後で、入力ボックスがタイピングではありませんが見つかりません次のように入力は、属性：

input {      
     -webkit-user-select:auto; //webkit浏览器    
}
复制代码

HTML5はどのようにケイトン/遅いソリューションにスクロールを降りてくるとき

それはIOSの問題カトンページのスライドを引き起こす可能性があり、100％：まず、高さを高くするhtmlと体のページを持つことができます。

溶液は：1.レッツHTML本体100％（または100VH）、2に固定した後、高さの中に置か：100％DIV設定オーバーフロー-Y：自動;および-webkitオーバーフロースクロール：タッチ。

オーバーフロー-X：iOS版の自動車は、互換性の問題、解決策を持っています

.scroll-box {
  /* 模态框之类的div不能放在这个容器中,否则关闭模态框有时候关闭不了 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
复制代码

要素の背景をクリックするか、境界線を削除する方法

、ボタン、入力、TEXTAREA {-webkit-TAP-ハイライト色：RGBA（0,0,0,0）; -webkitユーザモディファイ：読み書き平文専用; // - WebKitの-USER- }; RGBA（0,0,0,0）：それはもはや入力文字の複数}や、ボタン、入力、TEXTAREA {-webkit-TAP-ハイライト色を入力可能であり、副作用が変更しません

戻るブラウザは更新されません。

この状況は、以前に遭遇し、ここでまた次が言われて、主にキャッシュバック・ページに当たったとき、もう少しでWebViewの中で発生し、多くの場合、これはあなたの望む結果ではない、形ではなく、リフレッシュ後に表示され、解決この方法は、JSを使用することです：

window.onpageshow = function(evt){
  if(evt.persisted){ 
     document.body.style.display ="none";
     location.reload();
  }
};
复制代码

ページがキャッシュから読み出されているかどうかを判断持続し、onpageshowそれは、彼とのonloadとの間の差であるキャッシュまたは通常の負荷からロードされているかどうか、ページがロードされるたびにトリガされます

上の入力バイアスプレースホルダテキスト位置

入力テキストは、位置偏差に表示されるプレースホルダ：PC行の高さの設定が終了高さに等しい整列させることができ、上端たままに移動したときに溶液CSS設けられていますline-height:normal。

クリア遷移スプラッシュ画面

-webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现：保留3D
-webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见：隐藏
-webkit-perspective: 1000;
复制代码

アクティブ擬似クラスを解決するために失敗


复制代码

トップステータスバーの背景色

apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行;语法:
 //content设置为yesWeb应用会以全屏模式

复制代码

注意：最初にリンゴモバイルウェブアプリ対応使用しない限り、フルスクリーンモードを指定し、それ以外のメタタグはどんな役割を果たしています。内容がデフォルトに設定されている場合、ステータスバーが正常に表示され、空白に設定されている場合、ステータスバーを黒の背景、ブランク、半透明に設定した場合、ステータスバーは、半透明の黒を表示し、デフォルトまたは空白に設定すると、ページは、ステータスバー、頂部によって占有されるステータスバーの下に表示され、ページは底部分を占め、両方のカバーなしで、またはお互いをブロック;デフォルト;ブランク半透明に設定されている場合、ページの上部を覆うスクリーンを充填するページステータスバーは、（ページが20ピクセルの高さをオーバーライドし、iPhone4のとitouch4網膜画面40ピクセル）であります値がデフォルトです。

IOSエリア

貧弱なサポートなどの入力イベントからkeyup / KeyDownイベント/キー入力の問題のために、キーボードでのIOS

ソリューションであり、調査は、中国を入力した後、検索を開始するためにのみポイントBackspaceキーを必要とし、IOSの入力方法（いずれかのネイティブまたはサードパーティ）が中国からkeyupで検出された英語やデジタルkeyUpイベントを検出することはできませんが、ことがわかりましたkeyUpイベントコードで同様の効果を達成するために、交換するHTML5のoninputからkeyupイベントで。

1.入力を変更する：チェックボックスまたは入力：無線要素選択された状態は、属性の変更を確認

2.入力修正：テキストまたはTEXTAREAエレメントの値を、値のプロパティの変更

3.要素のselectedIndexプロパティの変更が統一使用入力モニタを生じる選択された項目を変更します


复制代码

IOSアルファベットキーボード入力、デフォルトでは、ソリューションを大文字

次のプロパティを設定します。


复制代码

// 3つの属性オートコンプリートの入力をデフォルトでオンになって、ブラウザが自動的に入力の値を記録することを許可するかどうかの代表は、レコードや機密入力内容をオフにするには、入力=「オフ」にオートコンプリートで添加することができる。autocapitalize：自動総額;オートコレクト：補正

iOSとOS Xのフォントエンドの最適化（水平および垂直方向の画面がなど太字の矛盾、中に表示されます）問題について

最善の解決策は、テキストサイズ調整のためになるので、どれもiOSの上で問題を解決することはできませんが、Safariのフォントスケーリング機能のデスクトップバージョンが失敗すると、テキストサイズ調整設定すると横画面のフォントサイズ、IOSブラウザがリセットされます100％

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
复制代码

いくつかのケースでは、そのような（ラベル、スパン）などの非クリッカブル要素は、iOSの下でトリガされませんイベントをクリックし、モニター

ただ、このような場合のクリックイベントをトリガしていないCSSの要素へのコードの行を追加します。

cursor: pointer;
复制代码

IOS時間日付のサポートは、（）と同じではありません

var date =new Date("2019/10/21"); 
复制代码

2019年10月21日午後12時00分00秒デバッグた2019年10月21日と同等、それは、IOSのデフォルトはゼロから計算されると言うことです、私たちは、午後12時00分00秒後ろ分、秒を設定する必要はありません

iOS版（サファリ）バインドクリックイベントタグは無効です。

iOSの（サファリ）は時々、クリックイベントタグが無効である、プラスのような空のοnclick=「」のように、バインドします。

空白のページでのIOS LOCATION.HREFジャンプ

解決LOCATION.HREFコート層のsetTimeoutで！

setTimeout(() => {
       window.location.href = 'www.juejin.im'
}, 0);
复制代码

とき、バグの回避策の行方キーボードがポップアップ表示されます

作成されたフックにApp.vueの統一された治療ができます

created() {
    this.handleFocusOut();
    this.handleResize();
},
methods:{
    handleFocusOut() {
      // input 焦点失焦后，ios 键盘收起，但没有触发 window resize，导致实际页面dom仍然被键盘顶上去--错位
      document.addEventListener('focusout', () => {
        document.body.scrollTop = 0;
      });
    },
    // 监听resize事件（键盘弹起触发），然后将 input textarea 元素滑动到可视区域，并将特定元素隐藏
    handleResize() {
      const clientHeight = document.documentElement.clientHeight;
      window.addEventListener('resize', () => {
        // 判断当前 active 的元素是否为 input 或 textarea
        if (
          document.activeElement.tagName === 'INPUT' ||
          document.activeElement.tagName === 'TEXTAREA'
        ) {
          setTimeout(() => {
            // 原生方法，滚动至需要显示的位置
            document.activeElement.scrollIntoView();
          }, 0);
        }

        // 解决键盘弹起后 fixed 定位元素被顶起问题
        const bodyHeight = document.documentElement.clientHeight;
        const ele = document.getElementById('fixed-bottom');
        if (ele) {
          if (clientHeight > bodyHeight) {
            ele.style.display = 'none';
          } else {
            ele.style.display = 'block';
          }
        }
      });
    }
}
复制代码

概要

道は長い偏った互換性のある方法で、来ています