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插件布局變小