モバイルエンドのウェブフロントエンドのピット

1.モバイル側のファイル名はゲームなどを使わないで、提携サーバーに広告をハイジャックされてプロジェクトの運行に影響を与えないようにする.
2.赤米携帯、uaはiphoneに戻り、platformと結びつけて判断する必要があるが、まだ正確ではなく、iosとandroidを区別する必要があるときに穴が開いた.
3.fixedの問題です.この解決策はできるだけ使わないようにすることですが、ios 7以下でこの問題が発生します.場合によっては赤米にもこの問題があります.
4.css 3のアニメーションを使いたい場合は、必ず3 d gpuで加速する方法を変えて、left、height、widthのような要素を変換しないでください.
android4.4以下のバージョンはあなたを殺します.
5.ios全線クリックは300ミリ秒遅延し、fastclickを使用して解決します.このプラグインが一番良心的です.
6.web appピクセルアイデザインはあなたの1 pxフレームの問題にこだわる
1 pxサイズの背景色要素を使用して、scaleX(0.5)またはscaleY(0.5)で0.5 px効果を実現できます.(その他の解決策:http://www.zhihu.com/question/
28870528;https://xinranliu.me/2015-05-09-1px-in-retina/)
たとえば、要素の下枠1 px効果を実現するには:demo:http://jsbin.com/tijiro/1/

 .item {   position: relative;  }  .item:after {   content: '';   display: block;   position: absolute;   width: 100%;   left: 0;   bottom: 0;   height: 1px;   background-color: #c8c7cc;   -webkit-transform: scaleY(0.5);   transform: scaleY(0.5);  }

7.qqブラウズ(X 5)、ucブラウズおよびiosのブラウザでは、スクロール時にscrollイベントはトリガーされませんが、touchmoveがトリガーされます.スクロールを停止するとscrollが出発します.
8.meta機能はよく使い、拡大・縮小を禁止し、比例を縮小し、電話番号を遮断するなどの機能が実用的である.
9.携帯電話のタオバオのような各プラットフォームが効果的に見えるようにするにはremを使用します.ただし、初期font-sizeの基準値調整に注意し、fを使用します.
ont-size:62.5%で問題が発生する場合があります

$(function() {
var jz_num;
offWidth = $(window).width();
jz_num = offWidth/750;
$("html").css("font-size", jz_num * 20 + "px");
});

10.-webkit-tap-highlight-colorクリックハイライトをキャンセルできます.
11.localStorageはブラウザが痕跡のないモードをオンにするとiosが異常を投げ、jsが中断します.
12.非クリック要素に対してclickイベントをリスニングする場合、iosではトリガーされず、cssでcursor:pointerを追加すれば済む場合があります.もちろん静止したいのはnot-allo
wed.
13.android4.4次のバージョンでは、フィレット属性を直接要素に設定する必要があります.親要素にフィレットを設定し、overflow:hiddenを指定しても有効ではありません.
14.微信ブラウザにある入力方式のemojiを入力すると入力ボックスに空表示
15.クリックしてclickを貫通
16.iOS(safari)あるラベルバインドクリックイベントが無効な場合、空のonclick=""を追加すればよい.例えば:
17.Android微信内蔵webviewはmeta viewportのサポートに欠陥があり、user-scalable=noの場合、widthを固定値(例えば640)に設定しても自動的に縮小しない
放して、jsでいくつか処理する必要があります
(新版微信はこの問題を修正した)
18.Androidが重力センサーを呼び出して返したデータはiOSとWindows Phoneとは逆です
19.iPhone 5以上の各種アプリケーションのwebview(例えば微信)は、大量の画像があるページに遭遇すると画像が乱れてしまう場合があり、6と6 plusはさらに深刻で、具体的な表
現在、様々なimgとbackground-imageが互いに錯乱し、私たちを長い間悩ませていた.まるで大きな穴であり、現在、一時的な解決方法はすべての画像に動的に使用されることを研究している.
元素を加える

-webkit-transform : translate3d(0,0,0)

強制再描画を行い、テスト結果はほとんどの問題が発生したマシンに有効ですが、まだ一部のマシンで問題が発生しています.もう一つの方法は怠け者のロードですが、
これにより開発効率が低下しbackground-imageを用いた要素の実現が困難になる
20.
safari(OS X、iOS、Windows版を含む)は、transform-originのZ軸判定が他のすべてのブラウザと異なり、transform-originを設定するZ軸が真っ直ぐになります
translateZの変換を生んで、とても理解しないで、しばらく純粋なcssの解法がありません
21.
Androidの各種ブラウザでは、複数のオーディオを同時に再生することはサポートされておらず、jsで複数のオーディオを連続して再生する場合に問題が発生します
22.
画像の大きさは表示の2倍が望ましい.
23.
小さいピクチャーはつなぎ合わせて雪碧図を作るのが最も良くて、それからTinyPNG–Compress PNG images while preserving transparencyで
サイト上で圧縮してから
Base 64はhtmlまたはcssに埋め込まれています.モバイル側はできるだけリクエストを減らす必要があります.しかし、あまり大きな画像はbase 64ではなく、性能が低下します.一般に10 kを境に
.
24.
remスキームはかなり複雑で、非常に多くの互換性の問題があり、アリ側にはFlexibleライブラリがあり、この一連の問題を解決しています.しかし互換性の問題は解決します
その後、開発が非常にスムーズになります.
25.
border-radiusはむやみに使わないでください.多くのアンドロイド機種では鋸歯が生えていて、とても醜いです.
26.
画像の多いページは必ず怠惰なロードをしなければなりません(つまり、画像にスクロールしたときにロードします)
27.底部に対して絶対的に位置決めするボタンをキーボードで押し上げ、jsで高さを決める

this.clientHeight = document.documentElement.clientHeight;
$('body').height(this.clientHeight);

28.
クリックジャンプをして、削除機能を長押ししているときはピットが多いです.
(1)touchstart,touchmove,touchend,clickイベントを組み合わせて使用する.
(2)一部機種では文字を押すと選択がポップアップされ、コピーされたオプションはonselectstart="return false;"禁じられる
--Hammerのようなモバイル・エンド・イベント・ハンドリング・ライブラリがたくさんあることが後から分かりました.JS - Hammer.js
29.
IOSの下とアンドロイドのjsonオブジェクトに対する遍歴順序は逆である.

var obj = {x: 1,y: 2},
    str = '',
    temp = '',
    i = 0;
for(var item in obj){
    temp = i === 0 ? '' : '&';
    i++;
    str += temp + item + '=' + obj[item];
}
console.log(str);

アンドロイド出力

x=1&y=2

IOS下

y=2&x=1

30.
微信iOS版は動的に生成されたフォームに全ページ切り替えられ、その提出ボタンが自動的にクリックされ、空白のフォームの提出を招く--iOS WebKitに切り捨てたHTを自分で補う
ML 5フォーム要素検証方法は、提出前にHTMLコードのrequired、pattern属性を検証し、そうでなければ提出イベントを阻止する.
31.
Androidがボタンなどをクリックしたとき、いつもフォーカスのカーソルがページに表示され、cssを追加すると解決します

body {
	-webkit-user-select: none;
}