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插件布局变小的更多相关文章

  1. vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题

    公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...

  2. keil编译STM32工程时 #error directive: "Please select first the target STM32F10x device used in your application (in stm32f10x.h file)"

    我们可以双击错误,然后会自动定位到文件 stm32f10x.h 中出错的地方,可以看到代码: #if !defined (STM32F10X_LD) && !defined (STM3 ...

  3. stm32的hall库新建模板编译错误： #error "Please select first the target STM32F1xx device used in your application (in stm32f1xx.h file)"的处理

    在stm32f1xx.h file文件中找到如下代码: /* Uncomment the line below according to the target STM32L device used i ...

  4. 【UI插件】简单的日历插件（下）—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  5. Struts2 easy UI插件

    一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...

  6. WPF界面设计技巧（9）—使用UI自动化布局

    原文:WPF界面设计技巧(9)-使用UI自动化布局 最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail 今天开始编写附属的加密/解密工具,对UI自动化布局有些 ...

  7. UWP学习记录2-设计和UI之布局

    UWP学习记录2-设计和UI之布局 1.导航基础知识 应用里,多个页面会有层次关系或者对等关系.这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据: 对于对等导航,一般用选项卡(tabs)或者 ...

  8. Arduino下LCD1602综合探究（上）——1602的两种驱动方式，如何使LCD的控制编程变得更简单

    一.前言: LCD ( Liquid Crystal Display 的简称)液晶显示器,已经逐渐替代CRT成为主流的显示设备之一,因此也成为了单片机发烧友绕不过的话题之一:而LCD1602更是很多单 ...

  9. 【UI插件】开发一个简单日历插件（上）

    前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...

随机推荐

  1. EasyUI导航栏。

    html: <div data-options="region:'west',split:true" title="导航栏菜单" style=" ...

  2. IIS 配置 FTP 网站

    在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 2008 R2,IIS7.5. 1. ...

  3. Docker学习笔记 - Docker的仓库

  4. ELK学习总结（3-2）elk的过滤查询

    和一般查询比较,filter查询:能够缓存数据在内存中,应该尽可能使用 建立测试数据 查看测试数据 1.filtered查询 GET /store/products/_search { "q ...

  5. Docker学习笔记 - Docker容器之间的连接

    学习目标: 容器之间可以相互连接访问:: --link redis:redisAlias 准备工作 FROM ubuntu:14.04 RUN apt-get install -y ping RUN  ...

  6. jquery下关于input和label的关于点击事件的坑

    待填坑: 法院费用结算页面的案件类型

  7. 初识JavaScript闭包

    一个问题引发的思考 在我学习javascript的事件时,有一个小任务是使用JS来实现 li 列表项在鼠标悬浮时会有背景阴影的动态效果,很自然想到用for 来为每个列表项添加onmouseover 和 ...

  8. Qt QFile文件读写

    QFile 需要添加 #Include  <QFile> 集成至QIODevice 打开一个文件有3种方式QIODevice::(ReadOnly/WriteOnly/ReadWrite) ...

  9. Selenium+Chrome/phantomJS模拟浏览器爬取淘宝商品信息

    #使用selenium+Carome/phantomJS模拟浏览器爬取淘宝商品信息 # 思路: # 第一步:利用selenium驱动浏览器,搜索商品信息,得到商品列表 # 第二步:分析商品页数,驱动浏 ...

  10. Text-文本检查

    #检查文本 from tkinter import * import hashlib master=Tk() text = Text(master,width=30,height=5) text.pa ...