移动端开发常见问题
移动端开发常见问题
小草莓蹦蹦跳
一枚努力奋斗的程序莓,喜欢记录和学习。本博客主要涵盖前端技术积累和工作积累。just do it,家人们加油加油油
展开
-
移动端官网总结
1、自定义加载中效果https://blog.csdn.net/qq_38290251/article/details/95489262http://huruji.github.io/loading/demo/loading.htmlhttps://projects.lukehaas.me/css-loaders/2、html页面注入环境变量若是生产环境,则加载的Vue和...原创 2019-08-02 11:18:09 · 337 阅读 · 2 评论 -
开发常用:开发项目中,前端常用工具类 整理更新中…
1、函数防抖2、函数节流3、移动端的浏览器 window.orientation 参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态4、判断是否为iphone x5、获取url参数6、url参数对象化7、url参数对象转字符串8、判断访问终端9、图片预加载10、休眠11、随机数 min ≤ r < max12、删除所有的cookies原创 2020-06-15 15:39:01 · 389 阅读 · 0 评论 -
Vue/微信小程序 自定义加载中loading效果
【代码】Vue/微信小程序 自定义加载中loading效果。原创 2019-09-06 11:27:36 · 1432 阅读 · 0 评论 -
弹窗遮罩层交互开发/阻止弹窗滚动
【代码】弹窗遮罩层交互开发/阻止弹窗滚动。原创 2019-07-12 15:21:02 · 207 阅读 · 0 评论 -
前端开发常用的工具库/插件库
https://weflow.io/下载地址:https://github.com/Tencent/WeFlow/releases说明文档:https://github.com/Tencent/tmt-workflowfavicon制作 - 在线工具Autoprefixer CSS online在线工具 - 你的工具箱TinyPNG – Compress WebP, PNG and JPEG images intelligentlyCan I use... Support tables for HTML5,原创 2019-07-09 15:15:24 · 130 阅读 · 0 评论 -
官网入口文件 index.html / index.ejs
【代码】官网入口文件 index.html / index.ejs。原创 2019-07-12 14:59:15 · 364 阅读 · 0 评论 -
CSS3 弹窗动效交互
/* 动效 */.anim { animation-duration: .8s; animation-fill-mode: both;}.anim.bounceIn { animation-duration: 0.5s;}.bounceIn { animation-name: bounceIn;}@keyframes bounceIn { from, 5...原创 2019-03-20 10:14:11 · 1062 阅读 · 0 评论 -
用户openId 和 unionId 的区别
1、长度不同openId=28,unionId=292、openId 是同一用户同一应用的唯一标识不同小程序或者不同微信H5,openId都是不一样的单个应用中用户的唯一标识是openId同一个appId下用户openId肯定是相同的 3、unionId 是同一用户不同应用的唯一标识不同应用是指同一微信开发平台下的不同应用。同主体(简单理解同一个公司注册的,并关联在平台),用户的唯一标识是 unionId也就是说,不同应用要找用户的唯一标识,就是 uni...原创 2020-10-29 16:11:33 · 22085 阅读 · 0 评论 -
开发移动端官网总结_Vue2.x
1、自定义加载中效果2、HTML页面注入环境变量 / 加载CDN和本地库3、在 Vue 中使用 wow.js4、过渡路由5、全局监听当前设备,切换PC端和移动端6、移动端常用初始化样式7、官网默认入口文件8、回到顶部滑动过渡效果(显示与隐藏、滑动置顶)9、弹窗遮罩层10、多个组件全局注册成全局组件11、在js中图片引入方式12、锚点跳转13、事件防抖14、在vue中使用swiper(轮播效果)15、vue滑动事件(左右滑动切换)16、页面回到指定位原创 2023-06-01 18:52:56 · 571 阅读 · 0 评论 -
微信小程序 —— 图片占位处理
【代码】微信小程序 —— 图片占位处理。原创 2023-06-01 17:44:08 · 578 阅读 · 0 评论 -
网页上的验证码是为了解决什么问题?说说你了解的验证码种类有哪些
比如12306买票的时候,各种抢购的时候。防止机器行为,确定是人为操作。原创 2023-05-05 09:56:03 · 80 阅读 · 0 评论 -
移动端终端适配方案整理
lib-flexible:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html迭代版:https://github.com/amfe/lib-flexiblehttps://www.w3cplus.com/css/vw-for-layout.htmlhttps://www.w3cplus.com...原创 2020-06-15 16:01:58 · 38 阅读 · 0 评论 -
移动端:横屏适配、图片模糊、1px问题
的屏幕上,位图的一个像素可能由多个物理像素来渲染,然而这些物理像素点并不能被准确的分配上对应位图像素的颜色,只能取近似值,所以相同的图片在。上面的方案是大漠在他的文章中推荐使用的,基本可以满足所有场景,而且不需要外部引入,这是我个人比较喜欢的一种方案。理论上,位图的每个像素对应在屏幕上使用一个物理像素来渲染,才能达到最佳的显示效果。查询判断不同的设备像素比来显示不同精度的图片。准备一张符合条件的边框背景图,模拟在背景上。边框,但是使用的都是位图,还需要外部引入。查询判断不同的设备像素比给定不同的。转载 2023-04-20 15:34:50 · 937 阅读 · 0 评论 -
在移动端适配中,1 像素边框高清如何实现?
圆角无法实现,实现4条边框比较麻烦,并且只能单独实现。如果嵌套,会对包含的效果产生不想要的效果,所以此方案配合:after和before独立使用较多。颜色不好处理, 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现,不好用。② 渐变 linear-gradient (50%有颜色,50%透明)基本所有场景都能满足,包含圆角的button,单条,多条线。利用CSS对阴影处理的方式实现0.5px的效果。大量使用box-shadow可能会导致性能瓶颈。可以设置单条,多条边框;四条边框实现效果不理想。原创 2020-06-18 10:45:29 · 208 阅读 · 0 评论 -
知识总结:移动端前端适配方案(总结)
目前为止出现的一些关于移动端适配的技术方案:① 通过媒体查询的方式即CSS3的 meida queries;② 以淘宝首页为代表的rem+viewport 缩放③ 以天猫首页为代表的Flexible方案;④vh、vw方案;⑤ 使用自适应百分比;⑥Cover布局和Contain布局媒体查询的方式可以说是我早期采用的布局方式。原理:它主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置。优点:调整屏幕的时候不用刷新页面即可响应式展示,原创 2020-06-17 15:55:12 · 2484 阅读 · 2 评论 -
所谓的H5
https://www.zhihu.com/question/30363342HTML5并不是一项技术,而是一个标准。标准的意思就是:学生准则手册。你可以按照准则做,甚至可以超出准则更加严格的要求自己,也可以不按照准则来,但是会被老师训斥小伙伴讨厌,别人都不找你玩,就像IE6一样。那HTML5这些标准浏览器厂商到底姿持不姿持呢?这要看他们各自的尿性了。像chrome这种不仅在很多标准上...原创 2020-07-21 23:53:41 · 137 阅读 · 0 评论 -
使用Flexible实现手淘H5页面的终端适配 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多。不管哪种方法,都有其自己的优势和劣势。而本文主要介绍的是如何使用Flexible这样的一库来完成H5页面的终端适配。为什么推荐使用Flexible库来做H5页面的终端设备适配呢?主要因为这个库在手淘已经使用了近一年,而且已达到了较为稳定的状态。除此之外,你不需要考虑如何对元素进行折算,可以根据对应的视觉稿,直接切入。当然,如果您有更好的H5页面终端适配方案,欢迎在下面的评论中与我们一起分享。转载 2020-07-21 18:08:52 · 123 阅读 · 1 评论 -
微信H5开发 总结一
jssdk 就是 jsbridge,在原生端暴露接口,js调原生端接口,分享属于jssdk里面的其中一个api,用到就要服务器签名信息。微信jssdk就是相对于小程序提供的api一样。小程序也是基于这个jssdk来开发的而已,签名不需要登录,只需要后台返回签名信息。你使用到jssdk就要签名。原创 2020-07-21 18:05:42 · 323 阅读 · 0 评论 -
修复移动端 bootstrap carousel左右手势滑动问题
【代码】修复移动端 bootstrap carousel左右手势滑动问题。原创 2020-07-20 14:06:11 · 204 阅读 · 1 评论 -
开发常用:前端适配 iPhoneX
当 viewport-fit=contain 时 constant 函数是不起作用的,必须要配合 viewport-fit=cover 使用。这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。前面也有提到过,只有设置了 viewport-fit=cover,才能使用 constant 函数。注意,这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。转载 2020-06-15 10:00:31 · 859 阅读 · 0 评论 -
H5页面 拦截微信授权 + 微信签名 + 微信支付 + 注意事项
一、提示只能在微信客户端打开H5二、微信授权登录三、VUE移动端使用vConsole的调试工具四、微信分享签名五、微信公众号微信支付封装六、适配大屏手机,更改背景图 若需要微信授权获取用户的信息以及微信签名,则需要用户在微信客户端打开H5 当前是否存在code,不存在则调用微信公众号网页授权登录换取code,并保存在本地;存在则说明已登录过 微信签名封装:微信公众号获取签名信息封装: 仅在开发和测试环境可打开调试原创 2020-06-16 11:03:14 · 2653 阅读 · 0 评论 -
小程序 -- 获取手机验证码功能代码
【代码】小程序 -- 获取手机验证码功能代码。原创 2020-06-09 15:49:33 · 1427 阅读 · 0 评论 -
如何隐藏微信内置底部前进后退的按钮?
在微信H5中,会有下面一个问题:使用window.location.href进行页面跳转或者 react 内部项目使用 this.props.history.push 进行页面跳转时,做好的 h5 页面放在微信里,底部会出选前进后退的按钮,如下图:解决方案如下:(适用于特殊场合)第一种情况:如果只是页面之间跳转,使用 window.location.replace 代替w...原创 2020-04-28 15:22:24 · 10155 阅读 · 0 评论 -
移动端 -- 屏幕旋转的事件和样式
0和180 表现为竖屏模式;正负90 表示横屏模式;原创 2019-03-19 11:13:41 · 1242 阅读 · 1 评论 -
移动端 -- 如何去掉元素被触摸时产生的半透明灰色遮罩?
android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来的效果不一样,可设置。设置 -webkit-tap-highlight-color 的 alpha 值为0。-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符。-webkit-tap-highlight-color的alpha值为0。对于按钮类还有个办法,不使用a或者input标签,直接用div标签。也就是属性值的最后一位设置为0,就可以去除半透明灰色遮罩。另外,有些机型去除不了,如小米2。原创 2019-03-19 10:44:11 · 1762 阅读 · 1 评论 -
移动端 --- 根据不同要求,设置meta
5、将网站添加到主屏幕快速启动方式,仅针对 ios 的 safari 顶端状态条的样式。4、当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对 ios的 safari。1、页面窗口自动调整到设备宽度,并禁止用户缩放页面。3、忽略Android平台中对邮箱地址的识别。2、忽略将页面中的数字识别为电话号码。原创 2019-03-19 10:29:19 · 249 阅读 · 0 评论 -
移动端 --- 区分苹果终端和安卓终端
【代码】移动端 --- 区分苹果终端和安卓终端。原创 2019-03-19 10:12:12 · 555 阅读 · 0 评论 -
移动端 --- ios微信页面回退不刷新的问题
pushHistory(); window.addEventListener("popstate",function(e){},false); functionpushHistory(){ varstate={ title:"title", url:"#" ...原创 2019-03-19 09:44:26 · 534 阅读 · 0 评论 -
移动端 --- 阻止浏览器点击图片会预览的方法
因为使用touchstart和touchmove事件的时候,假如页面顶部有个超级大的banner图,那么当横屏显示或者类似于ipad等屏幕宽度大于高度的情况下,整个banner图都占满了屏幕,这个时候页面没法滑动。因为你用touchstart和touchmove禁止掉了图片的默认行为,所以手指怎么滑动,页面都没反应的。在img元素上添加 onclick="return false"关于这里的click事件,其实也可以是touchend事件,使用 js 事件阻止默认行为的方法,这里需要注意哦!原创 2018-09-30 11:55:34 · 1658 阅读 · 1 评论 -
移动端 --- 解决苹果手机滑动卡顿的问题
移动端 --- 解决苹果手机滑动卡顿的问题,在滑动的页面上加上该样式:-webkit-overflow-scrolling : touch;原创 2018-09-30 11:39:03 · 8915 阅读 · 4 评论 -
安卓手机1px显示不出来的问题
安卓手机1px显示不出来的问题,将其写在行内样式就能显示出来原创 2018-09-30 11:39:52 · 2732 阅读 · 0 评论 -
移动端 -- webkit 如何更改表单元素(input、select、radio、checkbox )的默认外观(placeholder、下拉箭头、清除按钮)?特殊操作?消除transition闪屏
1、如何重置默认外观?2、改变输入框placeholder的颜色值?3、placeholder的文字能换行么?4、修改select 默认下拉箭头5、禁用 radio 和 checkbox 默认样式6、禁用PC端表单输入框默认清除按钮7、禁止ios和android用户选中文字8、禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片9、打电话10、发短信11、如何阻止windows Phone的默认触摸事件12、android 去掉语音输入按钮原创 2019-03-19 11:13:58 · 1012 阅读 · 1 评论 -
移动端 -- 微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整?
Anroid:复写了 layoutinflater 对 textview 做了统一处理。ios:修改了 body.style.webkitTextSizeAdjust 值。整个页面用rem或者百分比布局。android:暂无方案。原创 2019-03-19 11:14:29 · 650 阅读 · 1 评论 -
移动端的适配
移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 一、1px问题为了适配各种屏幕,我们写代码时一般使用设备独立像素来对页面进行布局。而在设备像素比大于 1的屏幕上,我们写的 1px实际上是被多个物理像素渲染,这就会出...原创 2020-06-11 10:01:47 · 1468 阅读 · 0 评论 -
移动端 -- 常用初始化样式
/* 全局样式 */body,html { padding: 0; margin: 0; overflow-x: hidden;}/* 禁止ios出现灰色背景 */* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}#app { font-family: "...原创 2019-07-12 14:52:34 · 198 阅读 · 0 评论 -
移动端 -- 常用工具整理
Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset,Normalize.css是一种现代的,为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap,HTML5 Boilerplate,GOV.UK,Rdio,CSS Tricks以及许许多多其他的框架,工具和网站上。原创 2020-08-12 10:17:46 · 408 阅读 · 1 评论 -
移动端 -- 最简单的移动端适配方案(rem+vw)
1.设计稿(前提设计稿是750px的)1vw = 屏幕的1%100vw = 屏幕的宽度 = 750px1px = 0.1333333333vw为了方便计算,放大100倍。则100px = 13.33333333vwhtml{font-size:13.33333333vw}rem是相对html元素则html为100px1rem = 100px注意:应设置me...原创 2019-03-20 10:12:52 · 1863 阅读 · 3 评论 -
移动端 --- JS关闭手机微信端网页
WeixinJSBridge.call('closeWindow');原创 2019-03-19 09:42:57 · 1874 阅读 · 0 评论 -
移动端 --- 解决ios上fixed失效的问题
原创 2019-03-19 09:32:26 · 2457 阅读 · 1 评论