博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web前端开发过程踩过的坑以及一些小方法技巧(持续更新)
阅读量:5953 次
发布时间:2019-06-19

本文共 2548 字,大约阅读时间需要 8 分钟。

一、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的解决方案

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


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

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

-webkit-overflow-scrolling: touch;

参考资料:

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

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

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

  • 对于ng,在package.jsonbuild后面改成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代码

//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,菜鸟一枚,还请大家见谅。

转载地址:http://qjoxx.baihongyu.com/

你可能感兴趣的文章
Oracle数据库时间戳转date类型进行判断操作
查看>>
过剩通勤应用——线性规划问题解决开源工具(下篇)
查看>>
使用Dom4j进行XML解析
查看>>
SplObserver观察者模式
查看>>
Dubbo架构设计详解
查看>>
使用JavaMail技术发送邮件
查看>>
[C++] 基础知识点:namespace
查看>>
Angular通过CORS实现跨域方案
查看>>
创建线程的四种方式
查看>>
大唐电信[600198]股票
查看>>
yii2 controller 接收get形式传输过来的参数
查看>>
Spring MVC控制流程与简易配置方案
查看>>
开启OpenStack Api跨域请求(CORS)功能
查看>>
拓步T66Ⅱ(牛牛2)Root教程
查看>>
redis的简单学习2.1-redis的数据类型
查看>>
《每个设计师都应该掌握的50个css代码段》11~20段
查看>>
C Primer Plus 第13章 文件输入/输出 13.11 编程练习答案
查看>>
JBoss 系列三十七:jBPM5示例之 Rule Task
查看>>
IOS9 微信支付报 prepayid 获取失败 ErrorDomainSSL, -9802
查看>>
iPhone 手机烧号的一些概念:五码烧号 vs OTA烧号
查看>>