Cheris

H5项目常见问题及注意事项

当我们谈论前端性能 我们在谈论什么?加载性能、渲染性能、用户交互相应速度、动画流畅、DOM操作无闪烁。。。

Meta 基础知识:

  • viewport

    1、JS动态判断

    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

width:设置viewport宽度,为一个正整数,或字符串‘device-width’;
height:设置viewport高度,一般不设置,自适应;
initial-scale:默认缩放比例,为一个数字,可以带小数;
minimum-scale:允许用户最小缩放比例,为一个数字,可以带小数;
maximum-scale:允许用户最大缩放比例,为一个数字,可以带小数;
user-scalable:是否允许手动缩放。

2、JS动态计算

1
2
3
4
5
6
7
8
9
10
11
12
13
var winWidth=  parseInt(window.screen.width);
var phoneScale = winWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}

  • 其他meta标签
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!-- 横竖屏设置 -->
    <meta name="screen-orientation" content="portrait"/>

    <!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果),和minimal-ui效果类似 -->
    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- 格式检测 数字识别为电话号码/对邮箱地址的识别/跳转至地图 -->
    <meta name="format-detection" content="telephone=no, email=no, adress=no">

    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">

    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">

更多 < meta > 知识获取

微信单页面修改title

问题:当页面载入时,微信顶部 title 获取并显示,之后怎么用JS修改 title ,无效。
这个是针对IOS出现的 hack ,Android是有效的。 貌似是IOS的webview没有监听titlechange事件。 目前的处理就是使用重新载入页面的形式来唤醒页面的title有关事件。

1
2
3
4
5
6
7
8
9
10
11
12
// 解决iOS设备修改title不起作用的bug
function set_title (title) {
document.title = title;
if (!ua.is_idevice) return;
// 随便访问iframe访问一个网页,title就可以刷新了
var $iframe = $("<iframe style='display:none;' src='/favicon.ico'></iframe>");
$iframe.on('load',function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);
}

点击事件 Click

click事件,移动端click事件有300ms的延迟(有很多PC页面没有做移动端分辨率兼容==》需要放大缩小来浏览==》移动端常用的放大缩小方案:双击==》区分单双击==》设置300ms延迟)
移动端解决方案:
引入zepto,用tap事件代替click;
tap不是原生事件,touchstart/touchmove/touchend
基本条件:从触摸到离开时间间隔短,从起点到终点距离间隔小

点击态:
方案1:用 :active 伪类 缺点:滚动的时候也会触发样式
方案2:

1
2
3
4
5
6
7
8
9
10
// 点击事件带点击态
$el.on('tap',function(e){
var $target = $(e.target);
var timer=null;
$target.addClass('active');
timer = setTimeout(function(){
$target.removeClass('active');
clearTimeout(timer);
});
});

滚动

全局滚动:滚动节点在body 节点或者更顶层
局部滚动: 滚动条在body 下的某一个dom 节点上

Col1 iOS Android
全局滚动 默认支持 定制版本较多,表现各异
局部滚动 默认没有滚动条,且滑动起来干涩 -
弹性滚动 支持 默认没有弹性滚动效果
-webkit-overflow-scrolling 支持 默认浏览器不支持 Android版chrome支持
触发出界 全局滚动:滚动到页面顶部(或底部)时继续向下(向上)滑动,就会出现;
局部滚动:滚动到页面顶部(或底部)时,手指离开停下,再继续向下(向上)滑动,就会出现
-
  • iOS局部滚动使用弹性滚动效果

    1
    2
    3
    4
    5
    // 建议:将属性挂在body上,可以避免很多奇怪的bug
    body{--webkit-overflow-scrolling: touch;}

    /*局部dom节点*/
    .scroll-el{overflow:auto;}
  • 流畅滚动的军规:

    body上加上 -webkit-overfllow-scrolling:touch
    iOS 尽量使用局部滚动
    iOS 引进ScrollFix 避免出界
    Android下尽量使用全局滚动