Webモバイル端末の開発の違いと古典的なピットを揮発する

7199 ワード
モバイル開発 javascript httml 5
Webモバイル
電話番号認識の違い
iOS Safari(他のブラウザやAndroidではできません)では、電話番号のように見える数字を電話リンクとして処理します.たとえば、次のようになります.
  • 7桁の数字、例えば:1234567
  • かっことプラス記号の数字、形は:(+86)123456789
  • 二重接続線の数字、例えば:00-00-00111
  • 11桁の数字、例えば:1380138000
    • 認識を閉じる

    認識を開く
    123456

    入力ボックスのシャドウの違い
    説明:iOSでは、入力ボックスのデフォルトに内部シャドウがあり、box-shadowを使用して解決をクリアすることはできません.
    input,
textarea {
    /*   1:      */
    border: 0;

    /*   2:       */
    border-color: transparent;

    /*   3:           */
    -webkit-appearance: none;
    appearance: none;
}

    Androidシステムの要素がクリックされたときに枠線が生成されます
    説明:androidシステムの一部はリンクをクリックすると、枠線または半透明グレーのマスクが表示され、メーカーによって額の効果が異なると定義されます.
    a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

    iOSのスライドがスムーズでない
    説明:ios携帯電話がページを上下にスライドするとカートンが発生し、指がページを離れると、ページはすぐに動きを停止します.全体的な表現はスライドがスムーズではなく、スライド慣性がないことです.解決:iOS 5.0以降のバージョンでは、スライドにはautoとtouchの2つの値が定義され、デフォルトはautoです.
  • スクロール容器にスクロールtouchメソッドを追加
    • .wrapper {
  -webkit-overflow-scrolling: touch;
}
  • overflowの設定:外部overflowをhidden、コンテンツ要素overflowをautoに設定します.内部要素がbodyを超えるとスクロールが発生し、超えた部分はbodyが非表示になります.
    • body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}

    MDN定義:-webkit-overflow-scrolling属性制御要素がモバイルデバイス上でスクロールバウンド効果を使用するかどうか.Auto:通常のスクロールを使用して、タッチスクリーンから指を離すと、スクロールがすぐに停止します.touch:リバウンド効果のあるスクロールを使用して、指をタッチスクリーンから離すと、コンテンツはしばらくスクロール効果を維持し続けます.スクロールを続ける速度は、スクロールジェスチャーの強さに比例します.新しいスタックコンテキストも作成されます.
    モバイル側のclick画面は200-300 msの遅延を発生し、PC側は
    問題の説明:モバイルデバイスのwebページは300 msの遅延があり、ボタンのクリック遅延やクリックの失効をもたらすことが多い.解決:
  • fastclickは携帯電話でのクリックイベントの300 ms遅延を解決できる
  • zeptoのtouchモジュール、tapイベントもclickでの遅延問題を解決するため
    • iOSの引き延ばし境界のプルダウンは空白が現れて、安卓はありません
    説明:画面のドロップダウンを指で押すと、画面の上部に白い領域が1つ増えます.指はスクリーンを押して引き、底に白い領域が1つ増えます.アンドロイドにはこの特性はありません.
    iOSでは、画面を上下にドラッグするとtouchmoveイベントがトリガーされます.このイベントがトリガーするオブジェクトはwebviewコンテナ全体で、コンテナは自然にドラッグされ、残りの部分は空白になります.
    解決:
    document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    //       
    e.preventDefault()
  },
  {
    passive: false
  }
)

    IOS日付フォーマット変換NAN問題
    説明:iOSシステムでJSが文字列の日付変更オブジェクトを変換する場合、文字列フォーマットは/間隔でなければなりません.通常は-間隔です.この問題は、微信ウィジェットIOS環境でも発生します.
    iOSシステムはjsのnew Date()メソッドにフォーマット要件があります
    let dt = new Date("2019-07-24 19:57") //    
// dt   valid Date

let dt = new Date("2019/07/24 19:57")  //

    解決:'yyyy-MM-dd'.replace(/-/g,'/')による文字列マッチング変換
    IOSキーボードが跳ね上がって元のビューを遮る
    説明:iosはキーボードを呼び出すと、ページ全体がキーボードで圧縮されます.つまり、ページの高さが小さくなり、fixedはすべてabsoluteになります.androidではキーボードがページに上書きされ、ページを圧縮しません.
    携帯端末のソフトキーボードを傍受することでElementを弾き出すことができる.scrollIntoViewIfNeeded(Boolean)メソッドは、ブラウザウィンドウの表示領域内にない要素をブラウザウィンドウの表示領域にスクロールするために使用されます.要素がすでにブラウザウィンドウの表示領域にある場合は、スクロールは発生しません.
    ElementについてscrollIntoView()のMDNリンク ElementについてscrollIntoViewIfNeeded()のMDNリンク 
    window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})

    onkeyUpとonKeydownの互換性の違い
    キーボードkeyup、keydownイベントをinputで傍受することは、Android携帯ブラウザでは問題ありませんが、ios携帯ブラウザで入力法で入力した後、すぐにkeyup、keydownイベントに対応していません
    非直接的な文字入力(中国語入力法)の下で判断制限を行い,単語選択後のみinputイベントをトリガーする.
    説明:oninputを使用して入力ボックスの内容の変化を監視する場合、value値の変化のみがoninputイベントをトリガーすることを期待しますが、中国語の入力では、単語を選択していないときのキーもoninputイベントをトリガーします.
    重要な解決策:composition event
  • composionstart:IMEのテキスト複合システムが開いたときにトリガーされ、入力を開始することを示す例えば(入力法が現れた瞬間)
  • compositionupdate:入力フィールドに新しい文字を挿入するとトリガー(入力方式で入力中)
  • compositionand:入力エディタのテキスト複合システムが閉じたときにトリガーされ、通常のキーボード入力状態に戻ることを示す(文字が選択され、入力が消えた時点)
    • 判断の制限:
        $('#input').on('compositionend', function(e) {
        var len = $(this).val().length;
        if (len > 16) {
            //     16 
        }
    });

    選択後にinputイベントがトリガーされます.
    var typing = false;
$('#ipt').on('compositionstart',function(){
    typing = true;
})
$('#ipt').on('compositionend',function(){
    typing = false;
})
//oninput oncompositionend    ，     
$('#ipt').on('input',function(){
    setTimeout(function() {
        if(!typing) {
            //To do something...
        }
    },0);
})

    ウィーチャットウィジェット
    WebpフォーマットIOSはサポートされていません
    説明:ウィジェットの内部で、IOSはwebpフォーマットをサポートしていません.アンドロイドはサポートしています.時間:201908
    setData設定KB数エラー
    説明:公式文書はsetDataがデータを設定する時1024 KBを超えることができないと言って、小さいプログラムはIOSの下で一回設定するデータは1024 kBを超えることができなくて、設定は問題があって、アンドロイドは問題がありません;時間:201908
    IOSシステムの微信バージョンは互換性がある
    説明:IOS 8システムは最高微信バージョン6.72しか互換性がなく、IOSシステム9は微信バージョン7.0.0以上互換性がある.
    wx.onSocket切断後、リンクIOSとアンドロイドの違いを再送信
    説明:ウィジェットwx.onSocketリンクは手動でネットを切った後に、IOSはひっきりなしに再リンクを要求するonSocketOpenを送信して、アンドロイドはできなくて、解決方法、1つのタイマーをしてリンク時間を起動します:201908
    一部のアンドロイドマシンはキーボードをクリックして同じ内容を送信します
    説明:一部のアンドロイドは、oppoがキーボードをすばやくクリックして送信すると、2つの同じ内容が発行され、ブレ防止と節流は有効ではありません.時間:201907
    微信公衆番号
    Androidは微信授権コールバックバンド#のURLをジャンプして空白が現れます
    説明:アンドロイド携帯電話は、微信授権コールバックの関数でジャンプしたURLに#を付けることはできませんが、#番号は末尾に置くことができます.例えば、http://www.xuejiehome.com/#/home、微信授権にジャンプした後、コールバックインタフェースが再びこのページの元のアドレスにジャンプした場合、微信には空白が表示されます.IOSにはこの問題はありません.
    例えば、http://www.xuejiehome.com/#/home、微信授権にジャンプした後、コールバックインタフェースは再びhttp://www.xuejiehome.com/#/h...にジャンプし、すなわちアドレスに最後にパラメータを追加し、微信に空白を表示する.
    例えば、http://www.xuejiehome.com/#/homeが微信授権にジャンプした後、コールバックインタフェースは再びhttp://www.xuejiehome.com/?ar...にジャンプします.すなわち、#homeの前にパラメータを追加し、ページのジャンプは正常です.
    なぜなら、キャッシュによるものであり、#番号後のパラメータなどが無視されているため、#以前のURLはライセンス前とライセンス後と一致し、Webリクエストを送信せずにキャッシュを直接読み出すためである.
    解決方法:ジャンプ先のURLを更新して、PHPのHeaderを使ってジャンプすることができて、デフォルトheaderは更新しません.header("Refresh: 0; url={$go}");あるいはjsスクリプトジャンプを出力することもできます:echo“window.location.href='{$go}';
    累積中、上記に誤りがある場合はご指摘ください
    参照先:
    モバイル端末H 5の開発によく使われるテクニックをまとめます(乾物がいっぱいですよ!)
    H 5微信は穴を登る道を支払う
    Windowsとlinuxでpingビッグパケットのコマンドフォーマット