wap モバイル ページは、dpr と width_html/css_WEB-ITnose に基づいて font-size の対応する値を計算します。

最近、私たちは会社のwapホームページを刷新し、より良い結果を達成するためにイベントページを追加しています。タオバオとJD.comのwapバージョンを参照し、タオバオのwapタッチスクリーンバージョンについていくつかの分析を行っています。適応性、互換性が非常に良いので整理してみました。

wap モバイル ページは、次のように dpr と width に基づいてフォント サイズ対応値テーブルを計算します:

dpr	最小幅 320px	最大幅 540px	係数
1	2 0px	33.75ピクセル	0.0625
2	40ピクセル	67.5ピクセル	0.125
3	60ピクセル	101 .25px	0.1875

備考:

1. 複数の関係に従って増加します

2. モバイル淘宝網はこのように計算されます

3. 私は PHPer であり、プロのフロントエンドではないため間違っています、教えてください。次に、ありがとうございます。

添付ファイル:

1. JSコード計算方法:

//携帯電話の画面dprと携帯電話の幅からフォントサイズの値を決定する

function autorun() {

//初期値

var default_width = 20;

var default_dpr = 1;

var dpr = window.devicePixelRatio;

var width = screen.width;

var html_style = '';

var body_style = '';

/ /dpr 複数の

var 差 = dpr /default_dpr;

//

を計算する if (差 === 1 || 差 === 2 || 差 === 3) {

var default_min_size = 20 * var default_max_size = 33.75 * default = 0.0625 html_style = get_font_sizeサイズ(width, 20, 33.75, 0.0625);

body_style = 'font-size:12px';

}

// dom操作を実行します

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

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

}

/**

* 電話画面の dpr と電話の幅を通じて font-size の値を決定します

* @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 = '';

//画面の幅は 320 ～ 540 の間で計算する必要があります

if (width

style = 'font-size:' +default_min_size + 'px'; Else if（width＆gt; 540）{

{

bar差= width -320; bar fontsize = default_min_size +差異 * default_coefficient; ';

}

Return style;

}

2. 参考記事:

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

3. 参考 JS 関数:

var dpr = window.devicePixelRatio ; // 携帯電話の画面を取得します dpr

var width = screen.width

4、テストツール:

開発者センターの携帯電話シミュレーションテストを使用してください

🎜🎜 🎜🎜🎜 🎜🎜 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜