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

╰半橙微兮° 2022-05-26 04:56 181阅读 0赞

## 写代码容易遇到各种奇怪的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.确认与取消按钮  
  
  
ο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);
      }

###     ###

### 您可能感兴趣的 ###

1.  [10个用Console来Debug的高级技巧][10_Console_Debug]  
    
2.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]

[Fundebug]: https://www.fundebug.com/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 ToString 奇淫技巧

int和float同样结果 decimal decTemp = 2.1m; Console.WriteLine(decTemp.ToString("0.00"

超、凢脫俗/ 2023年08月17日 17:17/ 0 赞/ 114 阅读

相关 Sql的奇淫技巧

1. case\_when 对数据分类 SELECT CASE WHEN population < 100 THEN '01' W

旧城等待，/ 2022年12月05日 13:57/ 0 赞/ 236 阅读

相关前端---js判断PC端或移动端

/ 判断PC或移动端 / function IsPC() { var userAgentInfo = navigator.userAgent

骑猪看日落/ 2022年11月28日 13:39/ 0 赞/ 121 阅读

相关 php代码判断pc端和移动端页面跳转,js判断PC端与移动端跳转

在网上看到很多这样类似的代码，但是有的很复杂，或者有的没有判断完全，上次经理去见完客户回来讲，使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去，后来经测

梦里梦外;/ 2022年11月18日 04:51/ 0 赞/ 249 阅读

相关奇淫技巧____MyEclipse2017破解教程

![Center][] ![Center 1][] ![Center 2][] ![Center 3][] ![Center 4][] ![C

╰+哭是因爲堅強的太久メ/ 2022年06月09日 00:54/ 0 赞/ 306 阅读

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

写代码容易遇到各种奇怪的BUG，推荐使用[Fundebug][]做线上bug实时监控。 1.没必要就不要用fastClick，因为会遇到奇怪的问题 ht

╰半橙微兮°/ 2022年05月26日 04:56/ 0 赞/ 182 阅读

相关移动开发中一些bug及解决方案

网页开发要面对各种各样的浏览器，让人很头疼，而移动开发中，你不但要面对浏览器，还要面对各种版本的手机，ios好一点，而安卓就五花八门了，你可能在开发中也被它们折磨过，或者正在被

短命女/ 2022年05月13日 00:26/ 0 赞/ 191 阅读

相关 nginx 移动端和PC端自动跳转

转自：https://www.jianshu.com/p/ea482004f32f 1. 前提一个官网，分别做了 PC 端和移动端，它们的信息如下所示： <

港控/mmm°/ 2022年02月05日 08:43/ 0 赞/ 463 阅读

相关 Shiro步步为营--奇淫技巧

目录会话管理启用会话管理自定义SessionDAO 会话验证关于缓存记住我认证VS记住我启用记住我 --------------------

偏执的太偏执、/ 2021年12月14日 09:49/ 0 赞/ 301 阅读

相关 IDEA奇淫小技巧

IDEA是目前市场上最好用的IDE，我说的！ ![format_png][] 前几年eclipse在市场上非常流行，因此大多数人都习惯了eclipse的一些快捷键。近年来，

墨蓝/ 2021年09月18日 05:22/ 0 赞/ 364 阅读