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. HTML事件处理程序

    事件处理程序中的代码执行时,有权访问全局作用域中任何代码. //为按钮btn_event添加了两个个事件处理程序,而且该事件会在冒泡阶段触发(最后一个参数是false). var btn_event ...

  2. Web Service的工作原理

    Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...

  3. SpringBoot应用的监控与管理

    spring-boot-starter-actuator模块 /health /autoconfig /beans /configprops:应用配置属性信息 /env:环境属性,如:环境变量.jvm ...

  4. ELK学习总结（4-2）关于导入数据

    用REST API的_bulk来批量插入,可以达到5到10w条每秒 把数据写进json文件,然后再通过批处理,执行文件插入数据: 1.先定义一定格式的json文件,文件不能过大,过大会报错 2.后用c ...

  5. ELK学习总结（2-3）Mget获取多个文档

     mget 获取多个文档 1.curl 命令格式:mget获取多个文档: curl  'localhost:9200/_mget'  -d  '{ "docs":[ { " ...

  6. linux下的Shell编程（4）特殊的变量和占位符

    $#表示包括$0在内的命令行参数的个数.在Shell中,脚本名称本身是$0,剩下的依次是$0.$1.$2-.${9},等等. $*表示整个参数列表,不包括$0,也就是说不包括文件名的参数列表. $?表 ...

  7. System Rules 更好的测试

    1:编写测试事例时候,我们要从控制台拿到数据与断言进行对比,通常要编写jdk 标准输出的屏蔽控制器.文章标题的包,能够更好的为我们进行工作. package demo2; import static ...

  8. Struts(十五)：主题

    Theme主题是配置的struts-core.jar下的com.apache.struts2包下的default.properties中(默认配置为:xhtml) ### Standard UI th ...

  9. php+MySql实现登录系统与输出浏览者信息功能

    这篇文章主要介绍了php+MySql实现登录系统与输出浏览者信息功能 的相关资料,需要的朋友可以参考下   本系统,与之前在<ASP 连接Access数据库的登陆系统>(点击打开链接)一文 ...

  10. 那些年，曾踩过的Spark坑

    1.报错18/01/25 14:56:58 ERROR executor.CoarseGrainedExecutorBackend: Driver 127.0.0.1:37159 disassocia ...