モバイルWeb開発のよくある問題の蓄積

最新の整理(2017)-適用済み
1、一部のAndroidバージョンシステムはheightとline-heightの高さを無効に設定し、「-webkit-appearance:listbox;属性解決:

element {
    -webkit-appearance: listbox;
    width: 100%;
    height: 80px;
    line-height: 80px;
}

2、スクロールスタイルを設定する:

        ： overflow-y: scroll;
        ：-webkit-overflow-scrolling: touch;

3、互換キーボードで入力ボックスをブロックする問題(ios)

$("input").focus(function(){
    var scrollTop = $("body > div").height(); 
    $('html,body').animate({scrollTop: scrollTop+"px"}, 500);
});

4、原図通りに切り取った画像は携帯電話でぼやける【リンク】

                      。
Android   480x800   ，iPhone4 640x960              320x480   。
   PC      ，        1.5~2           ，       。
           ，    PC     1.5~2       。

5、携帯電話の端点で要素を打つときに現れる影を取り除く(ハイライト)

-webkit-tap-highlight-color:rgba(255,255,255,0);
-webkit-tap-highlight-color: transparent;

  ：transparent    android   。

6、携帯端末の要素の陰影を取り除く:

-webkit-appearance:none;

7、携帯電話端末の画面の拡大・縮小を禁止する:

width    ，
initial-scale       ，
maximum-scale           ，
minimum-scale           ，
user-scalable        。

8、携帯電話のvideo点で自動フルスクリーンの問題を再生する:

9、画像の保存またはコピーを禁止する:

img{-webkit-touch-callout: none;}

10、モバイルデバイスの縦横画面が切り替わると、テキストのサイズが再計算され、対応するスケーリングが行われ、スケーリングが禁止される.

html {-webkit-text-size-adjust: 100%;}