モバイル・エンド・リソース・ノット

3218 ワード

次の内容はネットワークリソースに収集されています.
  • ios長時間非トリガシステムのメニューを禁止し、ios&android長時間ダウンロード画像
  • を禁止する.
    .css{-webkit-touch-callout: none}
    
  • iosおよびandroidユーザーのテキスト選択を禁止する
  • .css{-webkit-user-select:none}
    
  • モバイル端末フォント設定、デフォルトはシステムフォントを使用し、黒はPC上でデバッグするためだけで、近い効果
  • を達成する.
    body {font-family:Helvetica,'sans-serif','Microsoft YaHei';}
    
  • iosシステムの要素がタッチされたときに発生する半透明グレーマスクiosユーザーがリンクを削除するには、半透明グレーマスクが表示されます.無効にするには、-webkit-tap-highlight-colorのalpha値を0に設定します.つまり、属性値の最後のビットを0に設定すると、半透明グレーマスク
  • を除去できます.
    a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
    
  • 部分androidシステムの要素がクリックされたときに発生する枠をどのように削除するかandroidユーザーがリンクをクリックすると、枠や半透明グレーのマスクが現れ、メーカーによって定義された額の効果が異なり、-webkit-tap-highlight-colorのalpha値を0に設定して一部の機械が持っている効果を除去することができます-webkit-user-modifyには副作用があります.小米2
  • のように除去できない機種もあります
    a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
    -webkit-user-modify:read-write-plaintext-only;
    }
    
  • webkitフォーム入力ボックスplaceholderの色値は
  • に変更できます.
    input::-webkit-input-placeholder{color:#AAAAAA;}
    input:focus::-webkit-input-placeholder{color:#EEEEEE;}
    
  • 携帯電話でactiveを使うのは無効で、以下のjsを使ってこのバグ
  • を処理することができます
    
        document.addEventListener("touchstart", function(){}, true)
    
    
  • touchendトリガしない解決策
  •        :
           touchmove, touchend        ,    touchmove       。
         :
         touchstart        event.preventDefault();               !
    
  • 画面が回転するイベントとスタイルイベントwindow.orientation、取値:正負90は横スクリーンモード、0と180は縦スクリーンモードとして表現される.
  • window.onorientationchange = function(){
    switch(window.orientation){
    case -90:
    case 90:
    alert("  :" + window.orientation);
    case 0:
    case 180:
    alert("  :" + window.orientation);
    break;
    }
    }
    

    css
        //     
       //     
    //        
    @media all and (orientation:portrait) {
    .css{}
    }
    //        
    @media all and (orientation:landscape) {
    .css{}
    }
    
  • IOSデバイスor Androidデバイスと判断
  •    :
    var u = navigator.userAgent; 
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android   
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios   
    if (isAndroid) {
      alert('  Android'); 
    }
    if (isiOS) {
      alert('  IOS'); 
    }
    *
       :
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { 
      //alert(navigator.userAgent); 
      alert('  IOS');
    } else if (/(Android)/i.test(navigator.userAgent)) { 
      //alert(navigator.userAgent); 
      alert('  Android');
    } else { 
      alert('  PC');
    
  • 判断微信ブラウザor非微信ブラウザ
  • function is_weixn(){ 
        var ua = navigator.userAgent.toLowerCase(); 
        if(ua.match(/MicroMessenger/i)=='micromessenger') { 
            alert('      '); 
         } else { 
         alert('       '); 
        } 
    }
    is_weixn();