移动web开发经验总结(1)
1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。
2.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios点击元素时出现的阴影。
3.-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。
4.-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,会产生很多见所未见的bug。
5.@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。
6.-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。
7.多用text-shadow这个属性,可以美化文字效果, border-radius、box-shadow、gradient、border-image,在移动端都可以很好的支持,使用这些属性可以实现很炫丽的按钮。
8.android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具(iScroll)实现。
10.ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
11.css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。
12.input框会默认呼出,如果想隐藏键盘让其失焦即可。
13.当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。
14.使用iScroll的时候,在部分手机(部分小米、三星机型)中click会执行两次,是因为iscroll在判断滑动前,阻止了click事件,然后在滑动后,对原来的click事件进行了重构,在一些设备上并没有将默认的click阻止掉。所以,出现了类似双击的现象。
解决方案:
//1.自己写一个fn-->myclick,然后onclick="myclick();"调用。
var t1 = null;//这个设置为全局
function myclick(){
if (t1 == null){
t1 = new Date().getTime();
}else{
var t2 = new Date().getTime();
if(t2 - t1 < 500){
t1 = t2;
return;
}else{
t1 = t2;
}
}
/*自己的代码*/
} //2.上面的代码,也可以写在iscroll.js(4.2.5)的_end方法中,要注意var t1是全局的
//3.国外论坛在iscroll.js(4.2.5)对应位置添加
topOffset: 0,
checkDOMChanges: false, // Experimental
handleClick: true,
preventGhostClick: false, // prevent ghost clicks?防止2次点击
ghostClickTimeout: 500, // timeout for ghost click prevention设置时间差 /**
* Prevents any real clicks.
* See preventGhostClick portion of _end().
*/
_preventRealClick: function(e) {
if (e._fake !== true) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
e.cancel = true;
return false;
}
},
_end: function (e) {...... ev._fake = true;
if (that.options.preventGhostClick) { //preventGhostClick: true,
// prevent ghost real clicks on body
document.body.addEventListener('click', that._preventRealClick, true);
// until ghost click timeout expires
setTimeout(function () {
document.body.removeEventListener('click', that._preventRealClick, true);
}, that.options.ghostClickTimeout);
}
target.dispatchEvent(ev); //4.使用zepto的tap替换click
15.iOS中禁止用户保存图片、复制图片,img标签指定-webkit-touch-callout为none可以禁止设备弹出列表按钮,这样用户就无法保存/复制你的图片。
16.使用-webkit-user-select: none; 禁止用户进行复制, 选择。
最新文章
- Java的默认编码
- pycharm简单使用
- Android日常开发60条经验
- HDU 5092
- (转) Written Memories: Understanding, Deriving and Extending the LSTM
- [转]fedora启动telnet服务
- STL六大组件之——迭代器这个东西
- UNIX标准化及实现之选项
- ubuntu 16.04 Ubuntu 安装GDebi,从而安装deb文件
- SharePoint 2013 中将 HTML文件转换为母版页
- Docker入门之三容器
- OC中成员属性 成员变量
- 使用cobbler批量安装操作系统(基于Centos7.x )
- Beta Scrum Day 6
- 极客验证官方demo构建使用及代码分析
- 【一天一道LeetCode】#226. Invert Binary Tree
- P1135 奇怪的电梯 dp
- 2019.02.27 bzoj4556: [Tjoi2016&Heoi2016]字符串(二分答案+sam+线段树合并)
- Bash 笔记
- Scrapy爬虫学习笔记 - windows \ linux下搭建开发环境2