资讯专栏INFORMATION COLUMN

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

张春雷 / 2685人阅读

摘要:一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于,如果工具是以下版本,在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素,如。

一、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.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后不参与打包,仅仅完整复制,所以在开发过程中路径的写法按绝对路径写就好了,如下代码:

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

出现这样的结果就是由于

造成的,p元素是块级元素,定位如果为relative的话会占用位置,导致父元素被撑开了。

解决方法有:
1.给p元素设置绝对定位position: absolute即可。
2.p元素换成内联元素,如span
3.把p元素设置为内联元素,如display: inline
注:这儿p标签包img太业余了,大家平时写不要这样写,一般用div,菜鸟一枚,还请大家见谅。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117345.html

相关文章

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

    摘要:一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于,如果工具是以下版本,在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素,如。 一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...

    arashicage 评论0 收藏0
  • Web前端开发过程踩过的坑以及一些方法技巧持续更新

    摘要:一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于,如果工具是以下版本,在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素,如。 一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...

    binta 评论0 收藏0
  • VUE使用中踩过的坑

    摘要:前言如今可谓是一匹黑马数已居第一位前端开发对于的使用已经越来越多,它的优点就不做介绍了本篇是我对使用过程中以及对一些社区朋友提问我的问题中做的一些总结帮助大家踩坑。随后的重新渲染,元素组件及其所有的子节点将被视为静态内容并跳过。 前言 vue如今可谓是一匹黑马,github star数已居第一位!前端开发对于vue的使用已经越来越多,它的优点就不做介绍了,本篇是我对vue使用过程中以及...

    big_cat 评论0 收藏0
  • 优秀博文收藏(不定期更新

    摘要:我的书签我的书签谨慎导入,小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧,让你少写不必要的,代码更优雅一劳永 我的书签 我的书签(谨慎导入,小心覆盖) 工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

    sunsmell 评论0 收藏0
  • 优秀博文收藏(不定期更新

    摘要:我的书签我的书签谨慎导入,小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧,让你少写不必要的,代码更优雅一劳永 我的书签 我的书签(谨慎导入,小心覆盖) 工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

    zhangfaliang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<