タオバオのタッチスクリーン版

注：この記事はチュートリアルではなく学習メモですので、理解できないことや推測していることも多く、不完全な部分もありますが、ご容赦ください。

PC Web デザイナーとモバイル Web ページ制作の場合は、前に 1 つ追加しただけです

次に、実際のプレビュー効果に基づいて、比率や明瞭度の問題を調整して、最良の効果を実現します。もちろん、これは単に仕事に対処するためであるとも言えます。

最近、仕事が一段落したので、モバイルWebページを体系的に学ぼうと思いつきました。すでに一定の基礎はできているので、既成のモバイル Web サイトを解体して学習するのが最も早い方法です。

タオバオのタッチスクリーン版は良い選択になるはずです！

この学習ノートは、オンライン情報と彼自身の理解に基づいて xh 自身が書いたものです。何か間違っている場合は、コメントで指摘してください。すぐに修正します。ありがとうございます。

以上（全て戯言）。

いわゆる切断は、線ごとの解剖学を学ぶ必要があります！

そこで、2行目のdprという知識ポイントに出会いました。

dpr: デバイスのピクセル比 (devicePixelRatio)。

その定義:

window.devicePixelRatio は、デバイス上の物理ピクセルとデバイスに依存しないピクセル (ディップ) の比率です。

数式は次のとおりです: window.devicePixelRatio = 物理ピクセル/ディップ

詳細情報:

Xin Space のブログ投稿 (2012): http://www.zhangxinxu.com/wordpress/2012/ 08/ window-devicepixelratio/

JS呼び出し方法:

<script>    var dpr=window.devicePixelRatio;    alert(dpr);</script>

淘宝タッチスクリーン版アプリ:

1. chormeでデバッグした結果:

(1) apple iphone 5:

（2）apple iphone 6 plus：

という見方はもう知っていますポートは画面の拡大縮小率を指定します。

上記のスクリーンショットに基づいて、淘宝網のタッチスクリーンバージョンは異なるdprに従ってフォントサイズとビューポートを設定すると結論付けることができます。

これ、実はちょっと分かりにくいんです。これまで dpr を使用したことがなかったので、ビューポートは常に 1 に設定され、フォント サイズも PC 側の経験に基づいて 12 ～ 20 の間で推移しました。

これは一時的に次のようにしか理解できません: さまざまなデバイスの DPR に従って現在の定義を最大化するための淘宝網の適応。

htmlとbodyの両方にfont-sizeがあります。ただし、Web ページのフォント サイズは明らかに本文内部の設定に基づいています。

観察の結果、パターンは dpr:font-size=1:12; であることが判明しました

このパターンに従って設定することの具体的な利点と欠点はまだ発見されていませんが、淘宝網がそれを使用する場合、それ自体の利点があるはずです=, =

高さとdata-spmを設定する目的はこの記事の内容ではありません、後で勉強します~

終わりに、ちょっと宣伝:

Template World (www.templatesy.com),最新かつ最も完全な Web サイト テンプレートを共有およびダウンロードします。