The wap mobile page calculates the corresponding value of font-size based on dpr and width_html/css_WEB-ITnose

Recently, we are revising the company's wap homepage and adding event pages. In order to achieve better results, we refer to the wap versions of Taobao and JD.com, and then do some analysis of Taobao's wap. Taobao's wap The touch screen version is very adaptable and compatible, so I sorted it out.

The wap mobile page calculates the font-size corresponding value table based on dpr and width as follows:

dpr	最小宽度320px	最大宽度540px	系数
1	20px	33.75px	0.0625
2	40px	67.5px	0.125
3	60px	101.25px	0.1875

Remarks:

1. It increases according to the multiple relationship

2. Mobile Taobao is calculated in this way m.taobao.com

3. Because I am a PHPer, not a professional front-end expert. If there are any mistakes, please guide me. Thank you.

Attachment:

1. js code calculation method:

//Determine font-size through the mobile phone screen dpr and mobile phone width The value of

function autorun() {

//Initial value

var default_width = 20;

var default_dpr = 1;

var dpr = window.devicePixelRatio;

var width = screen.width;

var html_style = '';

var body_style = '';

//dpr multiples

var difference = dpr / default_dpr;

//Calculate

if (difference == = 1 || difference === 2 || difference === 3) {

var default_min_size = 20 * difference;

var default_max_size = 33.75 * difference;

var default_coefficient = 0.0625 * difference;

html_style = get_font_size(width, default_min_size, default_max_size, default_coefficient);

body_style = 'font-size:' * 12 'px';

} else {

html_style = get_font_size(width, 20, 33.75, 0.0625);

body_style = 'font-size:12px';

}

//Perform dom operations

$("html").attr('style', html_style);

$("body"). attr('style', body_style);

}

/**

* Determine the font-size value through the mobile phone screen dpr and mobile phone width

* @param {int} width

* @param {int} default_min_size

* @param {int} default_max_size

* @param {int} default_coefficient

* @returns {String}

*/

function get_font_size(width, default_min_size, default_max_size , default_coefficient) {

var style = '';

//Screen width needs to be calculated between 320-540

if (width < 320) {

style = 'font-size:' default_min_size 'px';

} else if (width > 540) {

style = 'font-size:' default_max _size ' px';

} else {

var difference = width - 320;

var fontsize = default_min_size difference * default_coefficient;

> style = 'font- size:' fontsize 'px';

}

return style;

}

2. Reference article:

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

3. Refer to the JS function:

var dpr = window.devicePixelRatio; //Get the phone screen dpr

var width = screen.width; //Get the phone screen width

4. Testing tools:

Use Google’s own mobile phone simulation test in the developer center