target-densitydpi=device-dpi會使其他ui插件布局變小

阿新 • • 發佈：2017-11-29

use 工具 har 寬度多少 itl ati cal 就是

target-densitydpi=device-dpi會使其他ui插件布局變小

東哥說：不用rem了，把meta改成這樣<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">就可以直接上px...

這句target-densitydpi=device-dpi是什麽意思呢？
target-densitydpi這個私有屬性，它表示目標設備的密度等級，作用是決定css中的1px代表多少物理像素

target-densitydpi值可以為一個數值或 high-dpi

、medium-dpi、low-dpi、 device-dpi這幾個字符串中的一個

當target-densitydpi=device-dpi時， css中的1px會等於物理像素中的1px。
好像已經決定要廢棄target-densitydpi這個屬性了，盡量避免使用這個屬性。

當你不在項目中用一些UI插件的時候，它顯示的沒問題，的確沒有使用rem的必要。

大部分手機端UI插件都是根據手機屏幕來展示它的大小，這時候，坑就出現了。

舉個栗子~

iphone6屏幕大小是375*667，當使用了target-densitydpi=device-dpi,而width=720時，也就是說當UI插件自認為是用了滿寬度(375)，實際上顯示的是屏幕的（375/720）≈ 52%

。

px轉rem片段

筆者當時的解決方案是，把px轉回rem，但是那麽多的css，每個px都手動轉，想想頭都大。

然後，第一時間，想到用正則表達式啊。
直接上代碼

var pxCode = ""; // 一堆px單位的css代碼
var remCode = cssCode.replace(/([0-9]*?\.)?[0-9]+px/g,function(res){
            return (res.split(‘px‘)[0]/100) + ‘rem‘
        }); // 一堆rem單位的css代碼

px轉rem小工具

<!DOCTYPE html>
<html>
<head> 

    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
*{ margin: 0; padding: 0; }
html,body{ width: 100%; height: 100%; }
.left{ float: left; }
.right{ float: right; }
.item{ width: 48%; height: 90%; border: none; position: relative; top: 5%; left: 0; }
.item textarea{ width: 100%; height: 100%; outline: none; resize: none; }
</style>
<body>
<div class="item left">
    <textarea id="px"></textarea>
</div>
<div class="item right">
    <textarea id="rem"></textarea>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(‘#px‘).keyup(function() {
        var px = $(this).val();
        var rem = px.replace(/([0-9]*?\.)?[0-9]+px/g,function(res){
            return (res.split(‘px‘)[0]/100)+‘rem‘
        })
        $(‘#rem‘).val(rem);
    })
</script>
</html>

target-densitydpi=device-dpi會使其他ui插件布局變小

use 工具 har 寬度多少 itl ati cal 就是 target-densitydpi=device-dpi會使其他ui插件布局變小東哥說：不用rem了，把meta改成這樣<meta name="viewport" content="width=720

target-densitydpi=device-dpi會使其他ui插件布局變小