Taobao touch screen version

Note: This article is a study note, not a tutorial, so there will be many questions that I don’t understand or guess, and there will be some incomplete details. I apologize for this.

For PC web designers and mobile web page production, I just simply added a

　

　 Then adjust some proportion or clarity issues based on the actual preview effect to achieve the best effect. Of course, this can be said to be just to cope with work.

　

Recently, my work has come to an end, so I had the idea to systematically study mobile web pages. Because you already have a certain foundation, the fastest way to learn is to dismember a ready-made mobile website.

The touch screen version of Taobao should be a good choice!

This study note is written by xh myself based on online information and my own understanding. If there is anything wrong, please point it out in the comments and I will revise it in time. Thank you.

The above (all nonsense).

The so-called dismemberment must be learned line by line anatomy!

　

　

　So, I encountered a knowledge point in the second line: dpr.

　dpr: device pixel ratio (devicePixelRatio).

　The definition:

　window.devicePixelRatio is the ratio of physical pixels on the device to device-independent pixels (dips).

　The formula expression is: window.devicePixelRatio = physical pixels/dips

　Specific detailed introduction information:

　Xin space Blog post (2012): http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

　JS calling method:

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

　 Taobao touch screen version application:

1. The result of debugging with chrome:

(1) apple iphone 5:

(2) apple iphone 6 plus:

　　

　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 boards since in in Start getting in touch with mobile At that time, I had already learned that viewport specifies the screen scaling ratio.

Based on the above screenshots, it can be concluded that the touch screen version of Taobao sets font-size and viewport according to different dpr.

This is actually a bit difficult to understand. Because I have never used dpr before, the viewport has always been set to 1, and the font-size also hovers between 12 and 20 based on my experience on the PC side.

This can only be temporarily understood as Taobao’s adaptation in order to maximize the current definition according to the DPR of different devices.

　

There is font-size in both html and body. But the font-size of the web page is obviously based on the inner body setting.

Observation found that the rule is dpr:font-size=1:12;

The specific pros and cons of setting according to this rule have yet to be discovered, but if Taobao uses it, there must be Its outstanding feature =, =

The purpose of setting height and data-spm is not the content of this article, we will study it later~　　

End, small Promotion:

Template World (www.templatesy.com), share and download the latest and most complete website templates.