移动端
文章平均质量分 55
光就一个字
这个作者很懒,什么都没留下…
展开
-
Vite2+Vue3的h5开发模板——开箱即用
h5-vite-vue3-template开箱即用的 h5 开发模板。技术栈:Vite/Vue3/Scss/github仓库地址目录简介├── index.html # index.html 模板├── jsconfig.json # JavaScript 配置├── package.json # package.json├── public # 静态资源目录(不会被处理)│原创 2021-10-21 10:22:01 · 931 阅读 · 0 评论 -
背景图长宽100%,也能显示不全?
前言前两天进行业务开发时,用到一个「券样式」的背景图(background-image),即下图的「返利¥1.30」:容器的宽度会根据文字内容自适应,代码如下:css:.coupon-like { padding: 8rpx 10rpx; background-size: 100% 100%;}html:(代码是微信小程序的写法)<view class="coupon-like" style="background-image: url('{{commonImgUrl.原创 2020-07-16 19:07:26 · 1064 阅读 · 0 评论 -
页面适配iPhone X系列
背景移动端页面开发时,有时会需要按钮悬浮于屏幕底部。对于iPhone x及以后的系列,因为底部小白条的存在,靠近页面底部的交互会与系统原生小白条的交互冲突,所以需要做些兼容性的处理。先上结论:html:增加viewport-fit属性,设为cover<meta name="viewport" content="width=device-width, viewport-fit=cove...原创 2020-03-16 19:22:21 · 222 阅读 · 0 评论 -
pc微信禁止启动小程序
App onLaunch时,通过`wx.getSystemInfo`接口获取设备信息,判定设备异常(不是ios、android、devtools),则触发死循环代码,阻止小程序正常运行。原创 2019-11-22 16:25:20 · 4965 阅读 · 3 评论 -
vue-cli3.0项目中使用vw——相比flexible更原生的移动端解决方案
以前喜欢用lib-flexible配合px2rem达到移动端适配的效果, 最近了解了下vw 与 vh单位,以viewport为基准,1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。安装命令行输入:yarn add postcss-px-to-viewport 或 npm i postcss-px-to-viewport -s...原创 2018-09-03 21:02:01 · 10369 阅读 · 0 评论 -
vue-cli3.0引入px2rem与lib-flexible 移动端适配
关于移动端的适配,我喜欢用px2rem配合lib-flexible,非常方便,vue-cli3.0后,项目配置被大大精简了,这使得原来配置px2rem的文件不复存在,但其实只要掌握了正确的姿势,配置方法比原来更简单~新时代的移动端解决方案:vw(待补充)lib-flexible作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来...原创 2018-09-05 17:27:50 · 15325 阅读 · 16 评论 -
vue h5与app交互心得
app(ios、安卓)与h5交互的原理:1、app向h5发送信息:调用window下的全局方法并向方法内传参 2、h5向app发送信息:以url跳转的形式完成,app会拦截h5的链接跳转,当监测到特定的url时,即触发h5与app的交互,如window.loacation.href = 'http://appName.local.com?action=actionName',action即为...原创 2018-08-27 10:31:44 · 10737 阅读 · 0 评论 -
vue移动端h5适配解决方案(lib-flexible+px2rem-loader)
先介绍用到的两个工具: px2rem-loader:将css中的px转为rem单位,用了它就不用自己计算rem值了 lib-flexible:根据设备宽度,修改根元素html的font-size,以适配不同终端配置安装1:npm i px2rem-loader --save -dev 安装2:npm i lib-flexible --save配置: build/utils....原创 2018-06-21 20:38:34 · 3740 阅读 · 4 评论 -
记录一个overflow:hidden引起的血案-仿QQ音乐webApp
今天回顾QQ音乐作品时,在手机上测试了一下,发现一个bug:等级页面跳转rank-detail时,没有像singer-detail一样整页显示,看起来就像是header and tab把rank -detail遮住了,但* pc上chrome调试工具和微信开发者工具测试均无此问题,于是开始找原因。以下记录我的思考过程:1。既然是被其他dom遮挡了,会不会是z-index优先级的问题=>...原创 2018-02-25 14:10:36 · 251 阅读 · 0 评论 -
vue.js降级(ios微信端audio不能播放的解决办法之一)
还是在做qq音乐webApp~快完成了,在ios上测试的时候,发现所有audio的音乐都不能播放几经搜索,找到了黄轶老师的一篇踩坑笔记 笔记中写的很多,关于为什么audio在ios上不能播放的根本原因和解决思路,受益颇多,感兴趣的推荐看下回到正题,降低vue的版本可以解决ios微信端audio不能播放的问题, 但是网上看了很多,关于可用的降级的方法很少(几乎没有),我是这么做的:原创 2018-02-03 14:18:56 · 3194 阅读 · 0 评论 -
在手机上预览vue项目
最近在做web音乐app时,用到了高斯模糊,但pc看不出效果,便想在手机端预览,遂作博一篇1.修改config修改config文件夹下的index.js文件:module.exports = { dev: { host: '0.0.0.0' // 原为: hotst: 'localhost' }}2.查询本地ipctrl+r输入cmd原创 2018-01-25 15:48:36 · 9360 阅读 · 0 评论