[转】前端开发PC及移动端bug总结和一些奇淫技巧

写代码容易遇到各种奇怪的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"

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local - 选取时间、日、月、年（本地时间）

Internet Explorer 或 Firefox 不支持 date 元素。
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.确认与取消按钮

onclick="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);
  }

[转】前端开发PC及移动端bug总结和一些奇淫技巧

写代码容易遇到各种奇怪的BUG，推荐使用Fundebug做线上bug实时监控。

您可能感兴趣的

猜你喜欢