手机端flex、字体设置、快速点击
 ;(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
调用
手机端flex、字体设置、快速点击的更多相关文章
- ThinkPHP3.2判断手机端访问并设置默认访问模块的方法
		ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ... 
- TP3.2.x判断手机端访问并设置默认访问模块的方法 - ThinkPHP框架
		手机端访问时调用Wap手机模块,实现在手机端访问时展示出手机网站,无需跳转域名首先我们在./Application/Common/Conf/ 目录下建立两个公共配置文件:config.php 和con ... 
- 手机端viewport的设置规范
		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale ... 
- js replace 全局替换  以表单的方式提交参数  判断是否为ie浏览器    将jquery.qqFace.js表情转换成微信的字符码  手机端省市区联动  新字体引用本地运行可以获得,放到服务器上报404  C#提取html中的汉字 MVC几种找不到资源的解决方式  使用Windows服务定时去执行一个方法的三种方式
		js replace 全局替换 js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ... 
- 3,fiddler手机端的设置
		1,首先设置手机端代理 选择链接的无限网,设置其代理 2,安装手机证书 只有在启动fiddler的时候手机才能够上网, 在浏览器,输入主机ip+fiddler端口的地址 进入后是下边的界面 点击下载证 ... 
- 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图
		轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ... 
- Fiddler手机端抓包环境设置与过滤(二)
		经过了上一篇,我们已经配好了PC与手机端的抓包环境可以实现抓包.传送机:https://www.cnblogs.com/jc-home/p/11668712.html 但是如果不经过筛选的话抓到的内容 ... 
- Fiddler手机端抓包环境设置与过滤(一)
		一.PC端Fiddler设置 1.安装https 证书 打开Fiddler->Tool->Fiddler Options->HTTPS tab,勾选上并Capture HTTPS C ... 
- 手机端布局,rem布局动态获取根字体大小
		手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ... 
随机推荐
- scrapy框架使用笔记
			目前网上有很多关于scrapy的文章,这里我主要介绍一下我在开发中遇到问题及一些技巧: 1,以登录状态去爬取(带cookie) -安装内容: brew install phantomjs (MAC上) ... 
- java中的JSON数据转换方法fastjson
			1 maven工程引入fastjson <?xml version="1.0" encoding="UTF-8"?> <project xml ... 
- 在chrome上隐藏video的option按钮
			隐藏方法: video::-webkit-media-controls{ overflow:hidden !important;}video::-webkit-media-controls-enclo ... 
- Azkaban启动web--javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection? 	at sun.se
			javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection? at sun.se javax.net.ssl. ... 
- [数]青蛙的约会&Strange function
			拓展欧几里得:求导&二分 POJ-1061 拓展欧几里得的应用,需要开long long 第一次做这个题的时候进行了毫无用处的找公式(?),是个现在的我看不懂的迷之思路. 第二发的时候还是不明 ... 
- Python-接口自动化(六)
			接口基础知识(六) (七)接口 1.接口:外部系统与本系统之间以及系统内部的各个子系统间,以约定标准提供的服务,包括对外提供的接口/对外提供的接口. 不同的请求协议:http webservice ... 
- 无界鼠标 Mouse Without Borders
			最近遇到一个不爽的事,单位的办公电脑,配置低,自带笔记本电脑,屏幕小. 在给自己的笔记本电脑外接了22寸显示器以后,屏幕是舒服了很多,而且外接了微软的人机工学键鼠套装,加上自己的伪人机工学椅,舒适性确 ... 
- Python输入数组(一维数组、二维数组)
			一维数组: arr = input("") //输入一个一维数组,每个数之间使空格隔开 num = [int(n) for n in arr.split()] //将输入每个数以空 ... 
- 理解什么是适配器(adapter)和接口(interface)
			● 适配器(adapter) In computing, adapter is a hardware device or software component that converts transm ... 
- FTP 代理服务器实现
			本文将在Linux环境下实现一个简单的FTP代理服务器,主要内容涉及FTP主动/被动模式和简单的Socket编程. 1. 主动模式和被动模式 FTP有两种模式,即主动模式(Active Mode)和被 ... 
