;(function flexible (window, document) {
var docEl = document.documentElement
♥1 var dpr = window.devicePixelRatio || 1 // adjust body font size
function setBodyFontSize () {
♦2 if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
♣3 document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize(); // set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
} setRemUnit() // reset rem unit on page resize
25♣3 window.addEventListener('resize', setRemUnit)
26♣3 window.addEventListener('pageshow', function (e) {
27◊4 if (e.persisted) {
setRemUnit()
}
}) }(window, document));

1

window.devicePixelRatio 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
devicePixelRatio 是“物理像素”和“逻辑像素”(也就是 CSS )之间的比例。所以网页如果没有针对这个数值优化,图片会看起来比较模糊。

2

document.body xhtml 特有事件
h5 直接支持body

3

window.resize 宽度自适应问题
window.pageshow 当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作,同时也会在onload 事件触发后初始化页面时触发)
e.persisted 从缓存中读取 true?false https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent/persisted多跟e.persisted 混合出现
  // 消除click在移动浏览器上物理点击与时间触发延迟300ms的问题
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
window.FastClick.attach(document.body);
console.log('执行了快速点击的处理操作');
});
}

记得引入fast.click js

手机端测试有一个vConsole.js

调用

var vConsole = new VConsole();
 
												

手机端flex、字体设置、快速点击的更多相关文章

  1. ThinkPHP3.2判断手机端访问并设置默认访问模块的方法

    ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ...

  2. TP3.2.x判断手机端访问并设置默认访问模块的方法 - ThinkPHP框架

    手机端访问时调用Wap手机模块,实现在手机端访问时展示出手机网站,无需跳转域名首先我们在./Application/Common/Conf/ 目录下建立两个公共配置文件:config.php 和con ...

  3. 手机端viewport的设置规范

    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale ...

  4. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  5. 3,fiddler手机端的设置

    1,首先设置手机端代理 选择链接的无限网,设置其代理 2,安装手机证书 只有在启动fiddler的时候手机才能够上网, 在浏览器,输入主机ip+fiddler端口的地址 进入后是下边的界面 点击下载证 ...

  6. 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  7. Fiddler手机端抓包环境设置与过滤(二)

    经过了上一篇,我们已经配好了PC与手机端的抓包环境可以实现抓包.传送机:https://www.cnblogs.com/jc-home/p/11668712.html 但是如果不经过筛选的话抓到的内容 ...

  8. Fiddler手机端抓包环境设置与过滤(一)

    一.PC端Fiddler设置 1.安装https 证书 打开Fiddler->Tool->Fiddler Options->HTTPS tab,勾选上并Capture HTTPS C ...

  9. 手机端布局,rem布局动态获取根字体大小

    手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...

随机推荐

  1. English trip V2 - 3. A Healthy Diet Teacher:Corrine Key:各种前缀 im- un- in- re- over- under-

    In this lesson you will learn to talk about foot and drink for a healthy diet. 课上内容(Lesson) What do ...

  2. 站在Web3.0 理解IPFS是什么

    尽管网络上,已经有不少文章讨论IPFS,不过真正讲明白IPFS想做什么的很少,文本尝试站在未来Web3.0的高度来看看IPFS究竟用来解决什么问题. DApp 的缺陷 对区块链有所了解的同学,知道区块 ...

  3. CORS在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  4. RecyclerView嵌套ScrollView导致RecyclerView内容显示不全

    我们在使用RecyclerView嵌套至ScrollView内的时候 RecyclerView不在屏幕内的数据会不显示出来,这里是一个坑,我们需要重写RecyclerView /** * Create ...

  5. nigix反向代理

    参考: https://www.cnblogs.com/yycc/p/8185748.html

  6. 思科模拟器PacketTracer7-----2台PC通过交叉线互连

    实验二—3 实验工具:思科模拟器PacketTracer7(可在思科官网下载,免费) 实验设备: PC两台,交叉线 实验步骤: 一.配置网络拓扑图 二.配置PC0和PC1的IP地址,掩码和网关 四.通 ...

  7. Mac OS X 绑定80端口,不装nginx的小技巧

    Mac OS X 因为要绑定80端口需要ROOT权限, 但是如果用root权限启动eclipse或tomcat又会造成, 启动创建的各类文件是root的,普通用户无法删除. 为此, 我们可以通过pfc ...

  8. [luogu P2633] Count on a tree

    [luogu P2633] Count on a tree 题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点 ...

  9. css 积累

    1.input 初始化 input { -webkit-tap-highlight-color: rgba(0,0,0,0); border: none; } input:focus { outlin ...

  10. python模块part1

    一.时间模块 1.时间表示形式 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串:(1)时间戳(timestamp) :通常来说,时间戳表示的是 ...