移动端适配
1.适配宽高等问题
REM方案：改变页面根部的font-size
1.通过媒体查询css来改变，缺点，不够精确，只能单纯解决长度问题，不够适配
```
html{font-size: 32px}
@media(min-device-width: 375px) {
html{font-size: 64px}
}
@media(min-device-width: 414px) {
html(font-size: 75px)
}
```
js方案：通过缩放viewport，达到高清效果，设置data-dpa属性，方便csshack
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
scale = 1 / dpr;
dpr = win.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',
initial-scale=' + scale + ',maximum-scale=' + scale + ',
minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem: function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
2.解决字体适配问题：通过上面的dpr属性来进行cssHack
字体要求：任何手机屏幕上字体大小都要统一，所以我们针对不同的分辨率(dpr不同)，会做如下处理：
font-size: 16px;
[data-dpr="2"] input {
font-size: 32px;
}
为了方便，我们也会用less写一个mixin：
less
font-dpr(@font-size){
font-size: @font-size;
[data-dpr="2"] & {
font-size: @font-size * 2;
}
[data-dpr="2.5"] & {
font-size: @font-size * 2.5;
}
[data-dpr="2.75"] & {
font-size: @font-size * 2.75;
}
[data-dpr="3"] & {
font-size: @font-size * 3;
}
[data-dpr="4"] & {
font-size: @font-size * 4;
}
}
.font-dpr(font-size, 32);
当然也有开源的插件来帮我们做这件事
lib-flexible 可伸缩布局方案:
它的原理跟以上的原理一样，也是动态创建viewport
字体问题:用[data-dpr]属性来区分不同dpr下的文本字号大小
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的
sass
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
@include font-dpr(16px);
Css兼容性问题
* 快速点击问题：因为浏览器需要300毫秒来判断是否是快速点击，所以页面js捕获click事件的回调函数处理，需要300ms后才生效：
使用fastclick.js， 如果使用zepto，使用touch和tap事件
* 一些情况下对非可点击元素如(label,span)监听click事件ios下不会触发：
css增加cursor:pointer就搞定了。
* 当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
* 消除 transition 闪屏：
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
*在ios和andriod中,audio元素和video元素在无法自动播放
$('html').on('touchstart',function(){
audio.play()
})
*CSS动画页面闪白,动画卡顿：
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
*fixed定位缺陷：
• ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
• android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
• ios4下不支持position:fixed
• 解决方案：1. 可用iScroll插件解决这个问题
*阻止旋转屏幕时自动调整字体大小：
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
*calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
网友评论