1. Androidブラウザで背景画像を見ると、一部のデバイスがぼやけます。
同じ割合の写真があるPCでは非常に明確ですが、電話では非常にぼやけています。理由は何ですか？
調査の後、問題を引き起こしたのはDevicePixelratioでした。携帯電話の解像度が小さすぎるため、Webページが解像度に従って表示される場合、単語は非常に小さくなります。そのため、Appleは最初にWebページにiPhone 4の960640の解像度を表示したため、DevicePixelRatio = 2。現在、Androidは非常に乱雑で、1.5、2、3です。
携帯電話で写真をより明確に表示したい場合は、IMGタグの代わりに2倍の背景画像を使用する必要があります（通常、2回）。たとえば、divの幅と高さは100100、背景画像は200200でなければならず、その後、バックグラウンドサイズ：conter;、表示された画像がより明確になります。
コードは次のとおりです。
背景：url（../ images/icon/all.png）繰り返しセンターセンター;幅：100％;高さ：50px;
または、バックグラウンドサイズを指定します。どちらも、試してみてください！
2。画像の読み込み
ゆっくりとした画像の読み込みの問題に遭遇した場合、この場合、携帯電話の開発は一般にキャンバス方式を使用してロードします。
特定のCanvas APIについては、http：//javascript.ruanyifeng.com/htmlapi/canvas.htmlを参照してください
キャンバスの例は次のとおりです。
<li> <canvas> </canvas> </li>
JSは写真とLIの動的にロードされます。合計17枚の写真が与えられます！
var total = 17; var zwin = $（window）; var render = function（）{var padding = 2; var winwidth = zwin.width（）; var picwidth = math.floor（（winwidth-padding*3）/4）; var tmpl = ''; for（var i = 1; i <= totla; i ++）{var p = padding; var imgsrc = 'img/'+i+'。jpg'; if（i％4 == 1）{p = 0; } tmpl+= '<li> <canvas id = "cvs _'+i+'"> </canvas> </li>'; var imageobj = new Image（）; imageobj.index = i; ImageObj.onload = function（）{var cvs = $（ '＃cvs _'+this.index）[0] .getContext（ '2d'）; cvs.width = this.width; cvs.height = this.height; cvs.drawimage（これ、0,0）; } imageobj.src = imgsrc; } } 与える（）;3.モバイルWebサイトがIEブラウザーと互換性がある必要がない場合は、通常Zeptojsを使用します。 Zeptojsビルトインタッチイベント方法、http：//zeptojs.com/#touchイベントを参照してください
Zeptio APIの新しいバージョンを見てみましょう。これはすでにIE10以内のブラウザをサポートしており、Zeptojsを使用することを選択できます。
4.携帯電話でWebページが拡大して縮小するのを防ぎます。これが最も基本的なポイントです。モバイルWebサイト開発者が最も知っておくべきことは、MetaでViewPortをセットアップすることです。
また、いくつかのモバイルWebサイトで次の声明を見てきました。
コードコピーは次のとおりです。
<！doctype html public " - // wapforum // dtd xhtmlモバイル1.0 // en" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd">
DTDを設定する方法はXHTMLです。ページがHTML5を使用している場合、DTDを設定せずに<！Doctype HTML>を直接宣言できます。
ViewPortを使用して、ページがズームするのを防ぎます。通常、ユーザースケーラブルを0に設定して、ページビューのユーザースケーリングをオフにします。
<Meta name = "Viewport" content = "user-scalable = 0" />
ただし、互換性を向上させるには、フルビューポート設定を使用します。
コードコピーは次のとおりです。
<Meta name = "ViewPort" content = "width = device-width、initial-scale = 1.0、maximurs-scale = 1.0、user-scalable = 0" />
もちろん、ユーザースケーラブル= 0、および一部の人々はユーザースケーラブル= noも書きます。どちらも問題ありません。5。Apple-Mobile-Web-App-Capable
Apple-Mobile-Web-App-Capableは、Webアプリケーションがフルスクリーンモードで実行されるかどうかを設定することです。
文法：
<Meta name = "Apple-Mobile-Web-App-capable" content = "yes">
説明：
コンテンツがYESに設定されている場合、Webアプリケーションはフルスクリーンモードで実行されます。コンテンツのデフォルト値はNOで、通常の表示を示します。読み取り専用のプロパティwindow.navigator.standaloneを使用して、Webページがフルスクリーンモードで表示されているかどうかを判断できます。
6。フォーマット検出
フォーマット検出は、自動認識ページで電話番号を有効または無効にします。
文法：
<Meta name = "format-detection" content = "電話= no">
説明：
デフォルトでは、デバイスは電話番号になる可能性のある文字列を自動的に認識します。電話= NOの設定は、この機能を無効にすることができます。
7。HTML5はAndroidまたはiOSのダイヤル機能を呼び出します
HTML5は、ダイヤルを自動的に呼び出すタグを提供します。タグのHREFに電話を追加するだけです。
次のように：
<a href = "tel：4008106999,1034"> 400-810-6999ターン1034 </a>
次のように電話を直接電話してください
<a href = "tel：15677776767">クリックして15677776767を呼び出します</a>
8。HTML5GPSポジショニング機能
詳細については、：//www.vevb.com/post/html5_gps_getCurrentPositionを参照してください
9.スクロールバーを上下に引っ張ると、スタックまたは遅いです
ボディ{-webkit-overflow-scrolling：touch;オーバーフロースクロール：touch;}Android3+およびiOS5+サポートCSS3新しい属性はオーバーフロースクロールです
10。テキストのコピーまたは選択は禁止されています
要素{-webkit-user-select：none; -moz-user-select：none; -khtml-user-select：none;ユーザーセレクト：なし;}モバイルデバイス用に選択できるページのテキストを解決します（製品のニーズに応じて）
11。ページを長時間押し続けてクラッシュします
要素{-webkit-touch-callout：none;}12。iPhoneとiPadの下の入力ボックスのデフォルトの影
要素{-webkit -appearance：none; }13。iOSとAndroidの下で要素に触れると半透明の灰色のマスクが表示されます
要素{-webkit-tap-highlight-color：rgba（255,255,255,0）}アルファ値を0に設定すると、半透明のグレーマスクを削除できます。注：Androidの下では、透過性のプロパティ値が無効です。
以下の記事には、詳細な紹介、http：//www.vevb.com/post/phone_web_yskがあります
14.アクティブな互換性処理は擬似クラスです：アクティブな無効です
方法1：ontouchstartをボディに追加します
<body ontouchstart = "">
方法2：JSはTouchStartまたはTouchEndイベントにバインドしてドキュメント
<style> a {color：＃000;} a：active {color：#fff;} </style> <a herf = foo> bar </a> <script> document.addeventlistener（ 'touchstart'、function（）{}、false）; </script>15。アニメーション定義3Dハードウェアアクセラレーションを有効にします
Element {-Webkit -Transform：translate3d（0、0、0）変換：translate3d（0、0、0）;}注：3D変形により、より多くの記憶とパワーが消費されます
16。網膜スクリーンの1px境界
要素{Border-Width：Thin;}17。WebKitマスク互換処理
一部のローエンドの携帯電話はCSS3マスクをサポートせず、オプションで格下げできます。
たとえば、JS判断を使用して、さまざまなクラスを参照できます。
if（document.documentelement.style）{alert（ 's support mask'）;} else {alert（ 's not supported mask'）;}18.画面を回転させるときのフォントサイズ調整の問題
html、body、form、fieldset、p、div、h1、h2、h3、h4、h5、h6 {-webkit-text-size-adjust：100％;}19。転移フラッシュ画面
/埋め込み要素が3Dスペースでレンダリングされる方法を設定：3D/-Webkit-Transform-3Dを保存：Preserve-3D;
20。ラウンドコーナーバグ
一部のAndroid携帯は、角を曲がった角が失敗しました
バックグラウンドクリップ：パディングボックス。
21。トップステータスバーの背景色
<Meta name = "Apple-Mobile-Web-App-Status-Bar-Style" content = "black" />
説明：
Apple-Mobile-Web-App-Capaableを使用してフルスクリーンモードを指定しない限り、このメタタグは機能しません。
コンテンツがデフォルトに設定されている場合、ステータスバーは正常に表示されます。空白に設定すると、ステータスバーには黒い背景があります。空白翻訳に設定すると、ステータスバーは黒透明に見えます。デフォルトまたは空白に設定すると、ページがステータスバーの下に表示されます。つまり、ステータスバーは上部を占め、ページは下部を占めます。どちらも相手によってブロックされていないか、ブロックされていません。ブランク翻訳に設定すると、ページが画面に入力されます。ページの上部がステータスバーで覆われています（ページの高さを20px、iPhone4とiTouch4の網膜画面は40pxです）。デフォルト値はデフォルトです。
22.キャッシュを設定します
<Meta http-equiv = "cache-control" content = "no-cache" />
通常、モバイルページは最初のロード後にキャッシュされ、各更新はリクエストをサーバーに留める代わりにキャッシュを使用します。キャッシュを使用したくない場合は、ノーキャッシュを設定できます。
23。デスクトップアイコン
<link rel = "apple-touch-icon" href = "touch-icon-iphone.png" /> <link rel = "apple-touch-icon" sizes = "76x76" href = "touch-icon-ipad.png" />> <link rel = "apple-touch-icon" sizes = "size /> <link rel = "apple-touch-icon" sizes = "152x152" href = "touch-icon-ipad-retina.png" />
iOSの下でさまざまなデバイスのさまざまなデスクトップアイコンを定義します。定義されていない場合は、現在のスクリーンショットをアイコンとして使用します。
上記の執筆方法には、デフォルトの光沢があると考えられる場合があります。次の設定方法では、光沢効果を削除し、デザイン図の効果を回復できます！
<link rel = "apple-touch-icon-precomposed" href = "touch-icon-iphone.png" />
画像サイズは5757（PX）に設定するか、網膜を114114（PX）に設定でき、iPadサイズは72*72（PX）です。
24。[スタート]画面
<link rel = "apple-touch-startup-image" href = "start.png"/>
iOSの下でページの読み込みを開始したときに表示される画像は、ロード時に白い画面を避けることです。
マトリックスを介してさまざまなサイズを指定できます。
<！ - iPhone-> <link href = "apple-touch-startup-image-320x460.png" media = "（device-width：320px）" rel = "apple-touch-startup-image" /> <！ - iPhone Retina--> <link href = "apple-touch-startup-image-640x920.png"（320.png "（ （-webkit-device-pixel-ratio：2） "rel =" apple-touch-startup-image " /> <！ - iphone 5-> <link rel =" apple-touch-startup-image "media ="（device-width：320px）and（（device-height：568px）および（-webkit-device-device-device-pixel-ratio：2） " href = "Apple-Touch-startup-image-640x1096.png"> <！ - iPad Portrait-> <link href = "apple-touch-startup-image-768x1004.png" media = "（device-width：768px）and（or orteration：portate href = "Apple-Touch-startup-image-748x1024.png" media = "（device-width：768px）and（wortheration：landscape）" rel = "apple-touch-startup-image" /> <！ - iPad retina Portrait--> <link href = "href =" medady = "" 1536px）および（オリエンテーション：ポートレート）および（-webkit-device-pixel-ratio：2） "rel =" apple-touch-startup-image " /> <！ - iPad retina landscape-> <link href =" link href = "link href =" （-webkit-device-pixel-ratio：2） "rel =" apple-touch-startup-image " />
25。ブラウザプライベートおよびその他のメタ
次の属性はプロジェクトに適用されていません。デモを書いて、次のテストをテストできます。
QQブラウザプライベート
フルスクリーンモード
<Meta name = "x5-fullscreen" content = "true">
強制垂直画面
<Meta name = "x5-orientation" content = "portipor">
強制水平画面
<Meta name = "x5-orientation" content = "landscape">
アプリケーションモード
<Meta name = "x5-page-mode" content = "app">
UCブラウザプライベート
フルスクリーンモード
<Meta name = "full-screen" content = "yes">
強制垂直画面
<Meta name = "screen-arientation" content = "Portime">
強制水平画面
<Meta name = "screen-orientation" content = "landscape">
アプリケーションモード
<Meta name = "Browsermode" content = "Application">
他の
主にBlackBerryなどのビューポートを認識していないいくつかの古いブラウザ向けに、ハンドヘルドデバイス用に最適化されています
<Meta name = "Handheldfriendly" content = "true">
Microsoftの古いブラウザ
<meta name = "mobileoptimized" content = "320">
Windows Phoneはハイライトなしでクリックします
<Meta name = "msapplication-tap-highlight" content = "no">
26。IOSでのキーアップ、キーダウン、キープレスサポートはあまり良くありません
問題は次のとおりです。ファジー検索の入力検索を使用する場合、キーボードにキーワードを入力し、Ajaxの背景をクエリしてからデータを返してから、返されたデータのキーワードを赤くマークします。入力を使用してAndroidモバイルブラウザーのキーボードキーアップイベントを監視しても構いませんが、iOSモバイルブラウザーでは非常にゆっくりと赤くなります。入力メソッドを使用して入力した後、キーアップイベントはすぐには対応しません。削除後にのみ対応することができます！
解決：
HTML5のOnInputイベントを使用して、キーアップを置き換えることができます
<入力型= "text" id = "testinput"> <script type = "text/javascript"> document.getElementById（ 'testinput'）。
その後、キーアップのような効果が得られます！
27。H5ウェブサイト入力をtype = numberに設定する問題
H5 Webページの入力のタイプを番号に設定すると、通常、3つの問題が発生します。 1つの問題は、MaxLength属性が使いやすいことではないことです。もう1つは、フォームが送信されると、デフォルトで丸められることです。第三に、一部のAndroid電話にはスタイルの問題があります。
問題が解決したら、現在JSを使用しています。次のように
<入力型= "number" oninput = "checktextlength（this、10）"> function checktextlength（obj、length）{if（obj.value.length> length）{obj.value = obj.value.substr（0、length）; }}質問2は、フォームの送信がフォーム検証で、ステップデフォルトは1であり、ステップ属性を設定する必要があるためです。 2つの小数点が保持されている場合、ライティング方法は次のとおりです。
<入力型= "number" step = "0.01" />
ステップについては、ここで簡単な紹介をします。入力型= numberでは、通常、上下の矢印が自動的に生成されます。 UP矢印をクリックすると、デフォルトでステップが追加されます。ダウン矢印をクリックすると、デフォルトでステップが削減されます。数字のデフォルトのステップは1です。つまり、ステップ= 0.01で、小数点以下の2つの場所の入力を許可し、上下の矢印をクリックして0.01を増加させ、0.01をそれぞれ減少させることができます。
ステップとminを一緒に使用する場合、値はminとmaxの間でなければなりません。
次の例を参照してください。
<入力型= "number" step = "3.1" min = "1" />
入力ボックスにどのような番号を入力できますか？
まず、最小値が1の場合、1.0を入力できます。2番目の値は入力（1+3.1）、つまり4.1などです。上矢印と下のクリックをクリックするたびに3.1が増加または減少し、他の数値を入力します。これは、ステップの簡単な紹介です。
質問3：デフォルトの入力スタイルを削除します
input [type = number] {-moz-appearance：textfield;} input [type = number] :: -webkit-inner-spin-button、input [type = number] :: -webkit-outer-spin-button {-webkit-appearance：none;マージン：0;}28。IOS入力ボタンスタイルの設定は、デフォルトスタイルによって上書きされます
解決策は次のとおりです。
input、textarea {border：0; -webkit-acpearance：none; }デフォルトスタイルをなしに設定します
29。IOSキーボード文字入力、デフォルトの初期文字の大文字化
解決策：次のプロパティを設定します
<input type = "text" autocapitalize = "off" />
30. [ドロップダウン]を選択します右アライメントを設定します
設定は次のとおりです。
[オプション] {方向：rtl;}を選択します31.スキューの変形は変換によって行われ、回転する回転はジャギングを引き起こします
次のように設定できます。
-webkit-transform：回転（-4deg）skew（10deg）translatez（0）;変換：回転（-4DEG）スキュー（10DEG）translatez（0）;アウトライン：1pxソリッドRGBA（255,255,255,0）
32。300ms遅延をクリックします
300msはまだ受け入れられますが、300msの原因となる問題を解決する必要があります。 300msは、ユーザーエクスペリエンスがあまり良くないことを引き起こします。この問題を解決するために、通常、TAPイベントを使用して、モバイル側のクリックイベントを置き換えます。
2つのJSが推奨されます。1つはFastClick、もう1つはTap.jsです
300ms遅延については、http：//thx.github.io/mobile/300ms-click-delay/を参照してください。
33。モバイルエンドポイント浸透問題
例は次のとおりです。
<div id = "haorooms"> nodイベントテスト</div> <a href = "www.vevb.com"> www.vevb.com </a>
divは絶対的な位置決めマスクであり、z-indexはaよりも高くなっています。 Aタグはページのリンクです。TAPイベントをDIVにバインドします。
$（ '＃harooms'）。
マスクレイヤーをクリックすると、Divは正常に消えますが、Aタグのマスクレイヤーをクリックすると、リンクAがトリガーされていることがわかります。これはポイントスルーイベントと呼ばれます。
理由：
TouchStartの前にTouchEndの前にクリックします。つまり、クリックトリガーが遅れ、今回は約300ミリ秒です。つまり、マスクはタップトリガーの後に隠されています。この時点で、クリックはトリガーされていません。 300ms後、マスクが隠されているため、クリックが下のリンクにトリガーされます。
解決する：
（1）タッチイベントを使用して、クリックイベントを交換してみてください。たとえば、TouchEndイベントを使用します（推奨）。
（2）FastClick、https：//github.com/ftlabs/fastclickを使用します
（3）PreventDefaultを使用して、タグのクリックをブロックする
（4）特定の時間（300ms+）を遅らせてイベントを処理する（推奨されない）
（5）上記は一般に解決できますが、実際に機能しない場合は、クリックインシデントに置き換えられます。
次のように、以下はTouchEndイベントです。
$（ "＃harooms"）。
34。IE10のフォーク数を排除します
入力：-ms-clear {display：none;}35。iOSおよびOS Xでのフォントの最適化について（水平画面や垂直スクリーンなどに一貫性のないフォントの太字があります。）
iOSブラウザが造園されている場合、フォントサイズはリセットされます。誰にもテキストサイズで調整することは、iOSで問題を解決できますが、デスクトップバージョンのSafariのフォントスケーリング関数は無効になるため、最良の解決策はテキストサイズの調整を100％に変えることです。
-webkit-text-size-adjust：100％; - ms-text-size-adjust：100％; text-size-adjust：100％;
36。IOSシステムについて、中国の入力方法で英語を入力すると、文字の間に6分の1のスペースが表示される場合があります。
定期的に削除できます
this.value = this.value.replace（// u2006/g、 ''）;
37。モバイルHTML5オーディオオートプレイ障害の問題
これはバグではありません。 Webページでオーディオまたはビデオを自動的に再生すると、ユーザーにいくつかのトラブルや不必要なトラフィック消費が引き起こされるため、AppleおよびAndroidシステムは通常、JSを使用して自動再生とトリガーされた再生を禁止します。ユーザーが再生される前にトリガーする必要があります。
解決策：最初にユーザーの試金スタートにタッチし、再生と一時停止をトリガーします（オーディオがロードを開始し、JSを使用して再度操作します）。
ソリューションコード：
document.addeventlistener（ 'touchstart'、function（）{document.getElementsByTagname（ 'audio'）[0] .play（）; document.getElementsByTagname（ 'audio'）[0] .pause（）;}）;38。モバイルHTML5入力日にプレースホルダーがサポートされていない問題
これに良い解決策はないと思います。次の方法を使用してください
コードコピーは次のとおりです。
<入力Placeholder = "date" type = "text" onfocus = "（this.type = 'date'）" id = "date">
一部のブラウザは2回クリックする必要がある場合があります！39。一部のモデルには、タイプ検索で入力があり、独自のクローズボタンスタイルの変更方法が提供されています。
検索入力コントロールの一部のモデルには、近接ボタン（擬似エレメント）が付属しており、通常はすべてのブラウザと互換性があるため、自分で1つを実装します。この時点で、ネイティブのクローズボタンを削除する方法は
#search :: -webkit-search-cancel-button {display：none; }ネイティブのクローズボタンを使用して、デザインスタイルに準拠したい場合は、この擬似エレメントのスタイルを変更できます。
40.拡張するオプションを奨励します
Zeptoメソッド：
$（sltelement）.trrgger（ "mousedown"）;
ネイティブJSメソッド：
function showdropdown（sltelement）{var event; event = document.createevent（ 'mousevents'）; event.initmouseEvent（ 'mousedown'、true、true、window）; sltelement.dispatchevent（event）;};