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. python之路--day8---day9--两日内容

    一.不使用函数的问题 1,代码的组织结构不清晰,可读性差 2,遇到重复的功能只能重复编写实现代码,代码冗余 3,功能需要扩展时,需要找出所有实现该功能的地方修改,无法统一管理且维护难度极大 二.函数是 ...

  2. Python 列表嵌套多种实现方式

    #coding=utf-8 list=[] for i in range(1,101): list.append(i) # print(list) tempList=[] newList=[] whi ...

  3. 在windows环境下安装redis和phpredis的扩展

    在windows环境下安装redis和phpredis的扩展 1.首先配置php: 需要在windows的集成环境中找到php的扩展文件夹,ext,然后在网上寻找自己的php对应的.dll文件 比如说 ...

  4. Python内置函数(44)——len

    英文文档: len(s) Return the length (the number of items) of an object. The argument may be a sequence (s ...

  5. Spring Framework 的 Assert断言

    知识共享才能传播,博采众家之长,才能推陈出新!-- 参考 https://www.cnblogs.com/hwaggLee/p/4778101.html 一.什么是 Assert(断言)? Web 应 ...

  6. Django之views系统

    Django的View(视图)简介 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错 ...

  7. java中数组、list、泛型集合的长度

    1 java中的length属性是针对数组说的,比如说你声明了一个数组,想知道这个数组的长度则用到了length这个属性. 2 java中的length()方法是针对字符串String说的,如果想看这 ...

  8. Java面试题—初级（4）

    31.String s = new String("xyz");创建了几个StringObject?是否可以继承String类? 两个或一个都有可能,"xyz" ...

  9. 1.2WEB API 跨域

    详细请参考http://www.cnblogs.com/landeanfen/p/5177176.html 在项目上面使用Nuget安装 microsoft.aspnet.webapi.cors 在w ...

  10. 浅析开源数据库MySQL架构

    数据库是所有应用系统的核心,故保证数据库稳定.高效.安全地运行是所有企业日常工作的重中之重.数据库系统一旦出现问题无法提供服务,有可能导致整个系统都无法继续工作.所以,一个成功的数据库架构在高可用设计 ...