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. 深入理解java的static关键字

    static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键字的用法和平常容易误解的地方,最后列 ...

  2. thinkphp框架调用类不存在的方法

    thinkphp框架调用类不存在的方法调用类不存在的方法,不会报错,但是也不会执行,这是根据tp框架里面的一个魔术方法,框架里面一共才十几个魔术方法

  3. Python内置函数(57)——print

    英文文档: print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False) Print objects to the text str ...

  4. HTTP协议扫盲（一）HTTP协议的基本概念和通讯原理

    一.HTTP协议的概念 1.引子  - 从url开始 URL(Uniform Resource Locator) 地址用于描述一个网络上的资源, 基本格式如下 schema://host[:port# ...

  5. jdk的server模式修改无效（关于client和server模式）

    本机为64位操作系统,64位jdk,win10. 修改C:\Program Files\Java\jre8\lib\amd64\jvm.cfg无效. 我的文件的内容为: 原因参考如下: http:// ...

  6. 前端学习之jquery

    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...

  7. 编码注释coding: utf-8

    # -*- coding: utf-8 -*- PY文件当中是不支持中文的,即使你输入的注释是中文也不行,为了解决这个问题,就需要把文件编码类型改为UTF-8的类型,输入这个代码就可以让PY源文件里面 ...

  8. Ajax实现注册无刷新验证用户名是否存在

    1. [代码][JavaScript]代码     ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  9. mysql数据库--explain（查询表是否走索引）各个字段含义

    1.1 id列 数字越大越先执行,如果说数字一样大,那么就从上往下依次执行,id列为null的就表是这是一个结果集,不需要使用它来进行查询. 1.2 select_type列 常见的有: ◆ simp ...

  10. iOS之AFSecurityPolicy

    AFSecurityPolicy是AFNetworking中负责对https请求进行证书验证的模块,本文主要是要搞清楚它是如何工作的. 在介绍AFSecurityPolicy之前,我们先来了解一下ht ...