電話でWebページを表示できるようになったとき、モバイルデバイス用にサイトを最適化することを考えた開発者はほとんどいませんでした。ユーザーの利便性のためのモバイルブラウザーの懸念は理解できます。 しかし、それ以来多くの水が流れ、今ではこの最適化にはブラウザー自体との闘いが含まれています。 発生する可能性のある問題とその解決方法については、以下を参照してください。
ブラウザー間の互換性は、サイトが同様に適切に表示され、さまざまなデバイスおよびさまざまなブラウザーでのユーザーアクションに応答することを意味します。
もちろん、場合によっては、視覚効果の一部を無視することもできますが、これは大部分は古いバージョンのブラウザーの最適化を意味します。
それにもかかわらず、まず最初に、描画された画像が画面上の表示と完全に一致し、マウスの操作とタッチの両方によってイベントが正しく機能することを確認します。
また、タッチベースのイベントに関する問題の解決策が表面にある場合、グラフィックデザインのデバッグは、キュートでふわふわしたモバイルブラウザーとの実際の戦いの前にウォームアップするのに最適です。
電話スクリーンのピクセル完璧なレイアウト
「大きい」ブラウザには、写真のレイアウトを確認できるアドオンがあります。一見したところ、レスポンシブデザインモードを使用する場合を除き、モバイルデバイスのレイアウトの確認とデバッグは機能しません。
しかし、これは一見しただけです。 アドオンはありませんか？ 自分で書きましょう！ 実際、隠されたブロックで十分であり、アドレス内の秘密のハッシュによってアクティブにされます。
地下に絶対配置の画像を配置し、色を反転させて、次のスクリプトを記述します。
<img src="/public/img/full.png" style="position:absolute;width:100%;top:0;left:0;opacity:0.8;filter:invert(100%);display:none;" id="pixel-perfect"/>
<script>
if(document.location.hash==="#pixel-perfect")
document.getElementById("pixel-perfect").style.display="block";
</script>
そして、私たちは独自のピクセルパーフェクトを取得します。
もちろん、重複する画像もオフにすることができるようにスクリプトを変更することは可能であり、必要であり、読者がこのタスクに楽に対処できると確信しています。 さて、またはデバッグコンソールを使用できます。
外部デバッグコンソール
モバイルブラウザにはデベロッパーのコンソールのような素晴らしいツールはありませんが、その機能の一部を取得できます。
AndroidおよびiOSデバイス用のネイティブWebベースデバッガーがあります。読者がそれらを採用することをお勧めします。
何らかの理由でネイティブデバッグツールが適切でない場合は、Weinreを使用できます。 Weinreは、ページとサーバーにインストールする必要があるクライアントスクリプトの束です。 彼はこのユーティリティの設定については詳しく説明しませんが、プロトタイプは結果として何が起こるべきかを示します。
ふわふわの足攻撃！
武器を手に入れたので、ついにページの制御をめぐる戦いでモバイルブラウザと格闘する準備ができました。
しかし、最初に敵の戦術を研究しましょう。
おばあちゃん、どうしてそんな大文字が必要なの？！
まず第一に、ブラウザはテキストの読みやすさを懸念している-一部の要素のフォントが小さすぎると思われる場合、ブラウザは公式の位置を不用意に使用し、何らかの方法でそれを増やします。
たいていの場合、ブラウザは単にフォーカスされている要素にページをズームします。 簡単に言えば、 ズームします。
また、フィールドをクリックしたときにフィードバックや注文フォームを分散させたいと考えていますが、一般的にスケーリングする機能を切り捨てることは悪い考えです。
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
一部のモバイルブラウザは、このタグを実際に正しく機能させ、入力フィールドの操作を停止します。 しかし、結局のところ、ユーザーのズームインとズームアウトの機能は遮断されます。 しかし、私たちは彼らの利便性のために戦っています。
したがって、フィールドに大きなフォントを配置するだけです。
画面の幅全体にフィールドを持つ25〜30ピクセルのフォントでは、この問題は発生しないことが確認されました。 また、フィールドが小さいほど、フォントが大きくなります。
固定コンテンツ
画面の端にメニュープレートが貼り付けられていても、モバイルブラウザーであってもだれも驚かないでしょう。 そして、彼らは自分自身でそれを非常に適切に解決します。ただし、スケーリングするとき、ダイスは明確でない何かに「折り畳まれ」ます。
したがって、 position：fixedのブロックの最小幅を指定することを忘れないでください。幅が100％に設定されている場合。
いいえ、スクロールではありません！
すでに勝利があなたのポケットにあるように思われるとき、敵は彼の最も陰湿なトリックを使用します！
そのため、「適用」ボタンが常にアクティブなフォームがあります。 あなたの便宜のために、あなたはそれを目の前に置いた-それはフォーム層の上に置かれ、デスクトップブラウザでは決してあなたやブラウザに問題を引き起こしたことはない。
ただし、フィールドがアクティブになっている場合、モバイルブラウザーは（もちろんユーザーの便宜のために）ページをスクロールして、フィールドが可視フィールドに収まるようにします。 確かに、そのような状況では彼はこれをあまり正確に行わず、ボタンはアクティブなフィールドを完全に覆います。
唯一の解決策があります-ブラウザにそれを実行させ、元の状態に戻します。 簡単に言えば、フィールドのフォーカスから0.5秒後にタイマーでスクロールを要素に合わせます。
勝利！ 敵は飼いならされています！
おそらく、モバイルブラウザは私たちに喜ばれる以上のものですが、悪からではありません！ 結局のところ、彼らは本当に白くてふわふわしていて、まだ誰もがまだできるわけではなく、時には彼らはあまりにも熱心にすでに良いページを改善しようとしています。
そして、あなたはそれらの背後にどのようないたずらに気づき、どのように戦ったのですか？