target-densitydpi=device-dpi会使其他ui插件布局变小

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-dpimedium-dpilow-dpidevice-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>
时间: 2024-10-09 12:06:24

target-densitydpi=device-dpi会使其他ui插件布局变小的相关文章

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

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

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

在stm32f1xx.h file文件中找到如下代码: /* Uncomment the line below according to the target STM32L device used in your    application   */ #if !defined (STM32F100xB) && !defined (STM32F100xE) && !defined (STM32F101x6) && \    !defined (STM32F1

【UI插件】简单的日历插件(下)—— 学习MVC思想

前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么就应该考虑其它UI库的接入问题 这个意思就是,我们的系统中所有UI插件应该有一些统一行为,我们如果希望统一为所有的插件加一点什么东西,需要有位置可加 这个意味着,可能我们所有的插件需要继承至一个抽象的UI类,并且该类提供了通用的几个事件点 ② 上次做的日历插件虽然说是简单,其耦合还是比较严重的(其实

jQuery 常用插件和UI插件 总结笔记

1. jQuery 常用插件 (1). 表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options});其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. Jquery Validate 验证规则 (1)required:true 必输字段 (2)remote:"check.

JavaScript之jQuery-8 jQuery 使用插件(zTree树插件、jQuery UI插件)

一.jQuery zTree树控件 zTree介绍 - zTree 是利用jQuery的核心代码,实现一套能完成常用功能的Tree插件 - 兼容IE.FireFox.Chrome 等主流浏览器 - 支持 JSON 数据 - 支持一次性静态生成和Ajax异步加载两种方式 - 支持tree的节点移动.编辑.删除 zTree使用步骤 - step 1: 下载zTree相关文件(js.css) - 下载地址: http://www.ztree.me/ - step 2: 引入相关文件 - css: 样式

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

UWP学习记录2-设计和UI之布局 1.导航基础知识 应用里,多个页面会有层次关系或者对等关系.这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据: 对于对等导航,一般用选项卡(tabs)或者导航窗(nav)来作为导航元素实现导航跳转.而对于层次关系,则使用中心(hub)来提供子页面的预览或摘要,或者使用大纲(master-details)来实现导航. 除此之外,返回(后退)和链接也可以用来导航.启用系统后退导航支持的方法是注册 BackRequested 事件的侦听器.标题栏后退按钮的

第七章(插件的使用和写法)(7.4 jQuery UI 插件 7.5 管理Cookie的插件 --- Cookie)

7.4 jQuery UI 插件 7.4.1 jQuery UI 简介 jQuery UI 主要分为3个部分,交互.微件和效果差: ? 交互.这里都是一些与鼠标交互相关的内容,包括拖动(Draggable).置放(Droppable).缩放(Resizable).选择(Selectable)和排序(Sortable)等待.微件(Widget)中有部分是基于这些交互组件来制作的.此库需要一个 jQuery UI 核心库 ----- ui.core.js 支持. ? 微件.这里主要是一些界面的扩展.

Unreal Engine 4 Radiant UI 插件入门教程

本篇章前提要求:在UE4上安装了Radiant UI插件.如果没有安装,请找其它教程(或者是笔者的其它的教程,目前正在写). 本教程的目的:探讨如何从网页元素中调用蓝图中的内容: 第一步: 写一个网页,大致内容为: <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-

使用jQuery UI插件实现切换主题功能——经验小结

最近为了美化页面,想在项目中加入主题切换的功能,网上查了好久,决定使用jQuery UI插件来实现,之所以要使用jQuery UI,是因为它自带了很多种主题包,只需下载引入即可使用,方便快捷.具体操作步骤如下: 1. 下载主题包 首先来看下jQuery UI提供的主题包:http://jqueryui.com/themeroller/ 里面的主题各式各样,还可以自定义主题,挑选合适的主题包下载,这里选取前4个, 目前最新版本是1.12.1,这里选用1.10.4版本,个人感觉这个版本比较好用,下载