Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

一、iOS上浏览器使用jQuery不允许事件代理到document上

$(document).on("click", "选择器", function(){});

---

以上绑定可能会出现点击失效的情况。解决方法就是在这些代码前加一串代码：

$(body>*).bind("click", function(){....});

---

二、移动端点击输入框（input）禁止手机输入法键盘弹出

在移动端页面开发时，我们有时候经常会用到自己定义的输入键盘，而不想自带键盘弹出，那么可以在点击事件中加入以下代码：

$("选择器").click(function(){ document.activeElement.blur(); });

---

三、在iOS平台上input的button类型会带有默认样式。

这个在Android上使用以下代码就可以解决，但是iOS不起作用。

border: none;
outline: none;
background-color: 颜色;

但是在iOS上需要加一个：

-webkit-appearance: none;

---

这个属性同样适用于Android。

四、移动端Retina屏（iOS） 1px的解决方案

这个我在网上找到许多解决方案，这里就直接放链接了

---

移动端 Retina屏 各大主流网站1px的解决方案
如何在Vue项目中使用vw实现移动端适配

五、iOS浏览器在设置overflow: scroll;后滑动不流畅，感觉像是卡顿

这个目前在Android和PC上没得问题，但是iOS上有问题，解决方法就是加上属性：

-webkit-overflow-scrolling: touch;

---

参考资料：

【兼容性】ios上设置overflow: scroll不滚动bug
iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理
iOS safari浏览器上overflow: scroll元素无法滚动bug深究
解决页面使用overflow: scroll在iOS上滑动卡顿的问题

六、元素在设置为display:inline-block;后元素之间会产生间距

解决方法就是在包含这些元素的父元素上设置CSS属性font-size: 0;

七、Angular CLI和Vue CLI打包的项目上线不在根目录出现资源找不到问题！

• 对于ng，在package.json的build后面改成ng build --base-href ./。
• 对于Vue，如果CLI工具是3.3以下版本，在vue.config.js中加入以下代码:

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/henjievue/'
    : '/'
}

3.3以上的版本加入以下代码：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/henjievue/'
    : '/'
}

八、Angular CLI开发对于assets文件的处理问题。

assets文件夹里面的内容在build后不参与打包，仅仅完整复制，所以在开发过程中路径的写法按绝对路径写就好了，如下代码：

<img src="assets/index/ng.png">

九、解决ios10及以上Safari无法禁止缩放的问题

//以下代码是为了解决在iOS 10系统之后设置meta来禁止缩放失效的问题
      window.onload = function() {
        // 阻止双击放大
        document.addEventListener('touchstart', function(event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        });
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function(event) {
            var now = (new Date()).getTime();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);

        // 阻止双指放大
        document.addEventListener('gesturestart', function(event) {
            event.preventDefault();
        });
      }

十、在最新的Vue脚手架工具下（3.x以上）使用2.x脚手架使用的搭建目录

在安装好最新的vue脚手架情况下，使用以下命令来安装一个额外工具：

npm install -g @vue/cli-init

---

之后就可以使用以下命令生成老的项目目录：

vue init webpack 项目名

...、设置margin：auto使块级元素居中，但是水平方向出现了滚动条，body没有占满浏览器窗口。

//HTML代码
<div id="smart">
    <div class="smart-container-one">
        <p style="position: relative; left: 600px;"><img src="img/lazyload-b3704113c8.gif"/></p>
    </div>
</div>

//CSS代码
#smart>.smart-container-one {
    width: 1240px;
    height: 450px;
    margin: auto;
}

出现这样的结果就是由于<p style="position: relative; left: 600px;"><img src="img/lazyload-b3704113c8.gif"/></p>造成的，p元素是块级元素，定位如果为relative的话会占用位置，导致父元素被撑开了。

解决方法有：
1.给p元素设置绝对定位 position: absolute即可。
2.p元素换成内联元素，如 span。
3.把p元素设置为内联元素，如 display: inline。

---

注：这儿p标签包img太业余了，大家平时写不要这样写，一般用div，菜鸟一枚，还请大家见谅。