写代码容易遇到各种奇怪的BUG,推荐使用Fundebug做线上bug实时监控。
1.没必要就不要用fastClick,因为会遇到奇怪的问题
http://cdn.bootcss.com/fastclick/1.0.6/fastclick.js
$(function() {
FastClick.attach(document.body);
});
2.移动端开发字体设置建议
body {
font-family: "Helvetica Neue",
Helvetica, STHeiTi, sans-serif;
}
3.苹果机click事件代理到body,document上会不触发
4.获取select的值$("#storeName").find("option:selected").text()
5、移动端如果使用 input type="date"
Internet Explorer 或 Firefox 不支持 date 元素。
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(UTC 时间)
- datetime-local - 选取时间、日、月、年(本地时间)
chrome 不支持 datetime
该插件可转换时间格式
6、ios手机和android上的uc浏览器等在页面滑动时会禁止一切js脚本,保存为一个状态A,滑动结束后才会触发scroll事件,从状态A开始。所以不能使用setTimeout进行倒计时。可以使用new Date计算时间差。
7.如果使用iconfont,传图的时候注意有色和无色,一般彩色图标要保留颜色,纯色图标不保留。
8.css3动画要写全 如:
-webkit-transition: all 5s;
可能在某些浏览器不起作用 必须这样写:
transition: all 5s;
-webkit-transition: all 5s;
9.弹性布局 垂直居中+ 左右居中
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
10.js代码判断安卓或者苹果
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
11.PC端避免点击获取焦点外围阴影太大
input:focus, textarea:focus, select:focus {
outline-offset: -2px;
}
12.data-href使用方法
if($(this).data('href')){
location.href= $(this).data('href');
}
13.强制全屏
14. 页面禁止滑动
function handler() {
event.preventDefault();
}
// 绑定事件
document.addEventListener('touchmove', handler, false);
// 解绑事件
document.removeEventListener('touchmove', handler, false);
15.点击鼠标跑到最后
var t = $(this).val();
$(this).val("").focus().val(t);
16.响应式常用分类
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
17. ios滑动 橡皮筋效果
-webkit-overflow-scrolling: touch;
18.ios android 去除select默认效果
-webkit-appearance: none;
IOS select自带padding:4em 需去除!
19.获取屏幕总宽度和总高度用 VW及VH 字体单位也可以用
20.手机端清除date默认样式
input[type="date"]:before{
color:lightgray;
content:attr(placeholder);
}
input[type="date"].full:before {
color:black;
content:""!important;
}
$("#myel").on("input",function(){
if($(this).val().length>0){
$(this).addClass("full");
}
else{
$(this).removeClass("full");
}
});
21.手机端给date placeholder
input[type="date"]:before{
color:lightgray;
content:attr(placeholder);
}
input[type="date"].full:before {
color:black;
content:""!important;
}
and put somenthing like this into javascript:
$("#myel").on("input",function(){
if($(this).val().length>0){
$(this).addClass("full");
}
else{
$(this).removeClass("full");
}
});
22.mac 启动与关闭tomcat
sudo sh /Library/Tomcat/bin/shutdown.sh
sudo sh /Library/Tomcat/bin/startup.sh
23.确认与取消按钮
οnclick="javascript:return confirm('确认取消排队吗?该操作不可恢复!')"
24.关闭iOS键盘首字母自动大写
25.禁止文本缩放
html {
-webkit-text-size-adjust: 100%;
}
26.忽略页面的数字为电话,忽略email识别
27.移动端禁止选中内容
div {
-webkit-user-select: none;
}
28.如何禁止保存或拷贝图像
img {
-webkit-touch-callout: none;
}
29.body需要设置ontouchstart
否则IOS无点击效果
30. IOS如果写click事件没效果 可以加cursor: pointer;
31.audio元素和video元素在ios和andriod中无法自动播放
触屏即播$('html').one('touchstart',function(){
audio.play()
})
32.开启硬件加速 保证动画流畅
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
您可能感兴趣的