手机端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 ...
随机推荐
- Vue项目使用bootstrap
①npm install boostrap@4.0.0 --save @4.0.0为版本号 ②在项目的main.js中添加 import 'bootstrap/dist/css/bootstrap.m ...
- Windows server2008服务器设置多用户登录
添加用户 右击我的电脑-->管理-->本地用户和组-->新用户 启用远程服务并添加远程用户 启用 右键我的电脑--->属性--->远程设置--->勾上允许远程连接到 ...
- 小程序 新建项目底部tabbar
在app.json中配置 { "pages": [ "pages/index/index", "pages/staging/staging" ...
- 在html后面拼接字符串后页面的跳转
我就举一个简单的栗子,主要目的是实现页面跳转时后面获取的参数 <div class="active"> 点击我可以跳转 </div> 样式就随便写一下 之后 ...
- Mock.js常用占位符——Basic、Date、Color
1. Basic 在通过占位符引用方法时, Mock.mock('@boolean') : Mock.mock('@boolean()') 都可以调用方法 方法 含义 使用举例 Random.bo ...
- python 做接口自动化测试框架设计
1,明确什么叫自动化测试,什么叫接口自动化测试,如何设计接口测试用例,已登录为例 自动化测试:解放人力来自动完成规定的测试. 自动化测试分层模型:UI层,不论WEB端还是移动端,都是基于页面元素的识别 ...
- java既然存在gc线程,为什么还存在内存泄漏?
java既然存在gc线程,为什么还存在内存泄漏? 1.既然 Java 的垃圾回收机制能够自动的回收内存,怎么还会出现内存泄漏的情况呢?这个问题,我们需要知道 GC 在什么时候回收内存对象,什么样的内存 ...
- A锚点实现,滚动页面内容改变tab选项
Css: ul{margin:0;padding:0;list-style:none;} a{ text-decoration: none; outline:none; -webkit-tap-hig ...
- promise知识点小结
断断续续学习es6也有一段时间了,趁着开学空闲对知识点做一些小结. 为什么使用promise 谈到Promise,我们知道,这是社区较理想的异步编程解决方案.想要掌握promise,我们首先要知道其提 ...
- Jenkins结合shell脚本实现(gitLab/gitHub)前端项目自动打包部署服务器
原始发布部署: 石器时代的我们,先是本地打包好项目,在去服务器上把原来的文件删了,然后回到本地copy到服务器: 这操看起来简单,实际部署的人就知道多烦了,假如来几个项目都要重新发布:那就爽了: 今天 ...