适配
meta标签
什么是适配？为什么要做适配？
- 适配：百分百还原设计图（等比）
- 没有加viewport meta标签时：等比 文字太小了整个用户体验太差
- 加了viewport meta标签时：不等比 占据的实际尺寸（英寸）一样
三种适配方案
rem
- chorm下的默认
font-size = 16px
- chorm下最小的
font-size = 12px
- IE6下元素最小高度为19px,可以将其父元素的fontSize设置为0，只能解决到2px
-
em参照与自己的font-size
-
rem参照于根标签(html)的font-size与其他标签无关
rem适配
- 想让一个1rem的元素不管在什么设备上都占据满屏
- 1rem最终渲染的px值为布局视口所代表的值
- 根标签的fontsize变为布局视口所代表的值
- 使用rem适配时，必须要先使用meta标签，把布局视口变成完美视口
- 元素的width的大小为
元素的宽度/布局视口的宽度rem
- 改变了每个元素在不同设备上所占据的css像素的个数！！！
- 优点：使用了完美视口
- 缺点：px到rem的转化比较复杂
(function(){
var styleNode = document.createElement('style');
var width = document.documentElement.clientWidth /16;
styleNode.innerHTML="html{font-size:"+ width +"px !important}"
document.head.appendChild(styleNode);
})()
设计图的要法
- 要一张750*1334的图(分辨率)
- 如果图片大小固定，可以使用viewport适配
viewport适配
- 改变布局视口的大小(调整initial.scale的比例)
- meta不能有
width=device-width
- 将每个设备的布局视口变为设计图的尺寸
如果设备的width的大小为320
可以把每一个设备的布局视口变成320
(function(){
var width = 320
var scale = document.documentElement.clientWidth /width
var metaNode = document.querySelector("meta[name ='viewport']");
metaNode.setAttribute("content","initial-scale="+ scale +",user-scalable=no");
})()
如何实现一物理像素的适配方案
- 使用rem适配方案做布局，使用initial-scale的比例缩放
(function(){
var dpr = window.devicePixelRatio||1
var styleNode = document.createElement('style');
var width = document.documentElement.clientWidth *dpr /16;
styleNode.innerHTML="html{font-size:"+ width +"px !important}";
document.head.appendChild(styleNode);
var scale = 1/dpr;
var metaNode = document.querySelector("meta[name = 'viewport']");
metaNode.setAttribute("content","width=device-width,initial-scale=" + scale +",user-scalable=no");
})()
移动端事件
querySelector的坑
-
document.querySelector静态获取dom节点
-
document.getElementsByClassName动态获取dom节点
触屏事件
- 触屏事件 建议使用dom2的形式去绑定
- touchmove 能不能单独触发？在移动端是没有办法单独触发的
- 鼠标事件
- mousemove能不能单独触发？在pc端是可以单独触发的
全面禁止移动端默认事件
document.addEventListener('touchstart',function(ev){
ev= ev||event
//return false dom0的禁止默认行为
ev.preventDefault();//dom2的禁止默认行为
})
自定义右键菜单
- 首先禁止document上的默认行为
- 右键事件
oncontextmenu
var wrap = document.querySelector('#wrap');
wrap.style.display ="none"
document.oncontextmenu = function(ev){
ev = ev||event;
var x = ev.clientX;
var y = ev.clientY;
wrap.style.left = x+'px';
wrap.style.top = y+'px';
wrap.style.display ="block"
ev.preventDefault();
}
document.onclick = function(ev){
ev = ev||event;
wrap.style.display ="none"
}
移动端的坑(事件点透)
- 目标：一个a标签在div的下面，点击一次a标签时，把div的display变为none，不触发a标签
- 实际效果：点击a标签后，div消失，a标签触发
- 原因：PC端的事件可以在移动端执行，PC端事件执行时有300ms的延迟(浏览器需要时间看一下后面到底触发什么事件)
- 移动端事件：touchstart
- PC端事件：onclick，onmousedown
var aNodes = document.querySelectorAll('a');
document.addEventListener('touchstart',function(ev)){
ev=ev||event;
ev.preventDefault();
}
for(var i=0;i
移动端的其他事件
- changedTouches:触发当前事件的手指列表(只能有一个？)
- targetTouches:触发当前事件时,元素身上的手指列表
- touches:触发当前事件时,屏幕上的手指列表
testNode.addEventListener('touchend',function(ev){
ev= ev||event;
setTimeout(function(){
testNode.innerHTML = "changed:"+ev.changedTouches.length+"
"+"target:"+ev.targetTouches.length
+"
"+"touches:"+ev.touches.length;
},200)
})
移动端模板
- 第一步:viewport meta标签
- 第二步:移动端事件的默认行为全面禁止掉
- 第三步:挑选一个适配方案
document.addEventListener('touchstart',function(ev){
ev= ev||event;
ev.preventDefault()
})
(function(){
var styleNode = document.createElement('style');
var width = document.documentElement.clientWidth /16;
styleNode.innerHTML = "html{font-size:"+width+"px !important}"
document.head.appendChild(styleNode);
})()
移动端常见问题
- 禁止电话与邮箱
- 链接&按钮背景高亮问题(一般为a，input,button)
-webkit-tap-highlight-color: rgba(0,0,0,0);
- 圆角问题(input的圆角在ios下渲染太过分)
/*处理圆角渲染太过分*/-webkit-appearance: none;
