![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动端兼容
文章平均质量分 65
yujin0213
这个作者很懒,什么都没留下…
展开
-
解决Vue项目在iOS 10 报错 “Cannot declare a let variable twice: ‘r‘”
问题描述如下图所示,H5页面在iPhone7P及IPhone5c(iOS 10)手机上打开白屏,使用vconsole查看报错原因是Cannot declare a let variable twice: 'r'问题定位原因是由于ios10的bug,按报错的描述来看原因是“变量不能被let声明两次”,但其实仔细review代码,并没有出现这种情况。尝试一一开始想到的最简单的方式,就是找到对应的模块,将所有的let修改为var,但是没有起作用。尝试二按照网上的解决方案,修改webpack的配置,原创 2021-10-31 17:00:19 · 2410 阅读 · 0 评论 -
H5 iOS新机型适配
前言近期在做落地页优化项目中,针对iOS多种新机型(iPhone X之后的刘海屏)适配,有一些坑点,及适配相关的心得,在此记录一下问题落地页首屏页面要求铺满全屏,背景图撑满。之前设计稿都是750 * 1134,但是为了适配iPhone X(分辨率375 * 812)类的刘海屏手机,UI多出了一份750 * 1642的设计稿,那么页面首屏的高度需要是屏幕高度,背景图要按两套背景图来,而由于该项目里区分国家,所以一共是2套*3国,6套背景图解决方案方案一首屏dom高度设置为100vh .firs原创 2021-07-20 13:55:37 · 414 阅读 · 0 评论 -
解决Vue项目在iOS 9 报错 “SyntaxError: Unexpected keyword ‘const‘. Const...“
问题描述如下图所示,H5页面在iPhone5s(iOS 9)手机上打开白屏,使用vconsole查看报错原因是"SyntaxError: Unexpected keyword ‘const’. Const…",低版本浏览器不支持es6语法。但是查看打包后的app.js,其实是没有const的,而报错里面的11.js是有cosnt原因查看对应的代码,发现该文件里引入了三方库里面的方法,但是node_modules里的依赖默认是不会被babel处理的,所以es6的语法没有被转化成es5的,低端浏览器不支原创 2021-03-18 19:46:49 · 2416 阅读 · 0 评论 -
解决移动端input点击与失焦事件冲突
问题描述如下图所示,移动端的输入框,后面是一个清除按钮。业务场景是收起键盘的时候触发校验逻辑,但是实现的时候,点击清除按钮,键盘就自动收起了,而且也触发了校验逻辑。交互要求:输入文本的时候键盘是弹起来的,此时点击清除按钮,不让键盘收起;输入完成后,收起键盘,此时点击清除按钮,需要聚焦到input里,且弹起键盘原因input点击事件与失焦事件冲突了,在click的时候会先触发blur事件,再触发click事件解决方案1、思路监听清除按钮的mousedown事件,阻止默认事件,即阻止点击后默认失原创 2020-12-29 17:32:28 · 3010 阅读 · 0 评论 -
移动端适配rem+vw
前言对于做移动端开发的同学来说,rem这个单位并不陌生。通常我们做移动端适配,主流的方案大致有两种淘宝flexible.js计算设备像素比,dpr=物理像素/css像素根据设备像素比,将页面宽乘以设备像素比,然后去计算rem,这样页面所有元素都会是正常的2倍然后通过meta标签的viewport对页面进行缩放,使得页面恢复正常根html的font-size值 = 屏幕宽度*设备像素比/10以iphone6 375为例,1rem = 375 * 2 / 10 = 75px然后在项目里写原创 2020-08-23 20:12:12 · 1318 阅读 · 2 评论 -
iOS上H5一些兼容性问题
iOS 上 使用input标签会自动调起软键盘,如果不想调起软键盘,建议不写input标签,使用div代替场景:比如点击输入框后跳转其他页面,如果使用input框,在ios上会先弹出软键盘再跳转input不能自动聚焦,使用DOM.focus() 或是autofocus属性或者手动触发点击事件都不行,主要是因为IOS的安全机制,得用户触发事件后才能聚焦解决方案:搜索框和搜索结果页在同一个页面,不要使用路由跳转返回上一页,页面加载完成后会先白屏,得滑一下页面或者触屏,才能恢复正常.原创 2020-05-15 18:08:09 · 1533 阅读 · 0 评论 -
clipboard.js移动端无法实现复制
clipboard.js简介:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。在项目中使用clipboard.js插件去实现点击按钮,复制文字到剪切板的功能。同样的代码,在PC可以实现正常复制但是在移动端却失效主要是因为移动端项目为了防止用户长按文本实现复制,一般在重置reset.css里面都会设置div, p, a, ul, li, ol, h1, h...原创 2018-10-23 11:52:38 · 2978 阅读 · 0 评论 -
iOS H5 history.back() 返回上一路由 页面白屏
问题描述最近在做H5项目的时候,发现使用history.back()在IOS上返回上一页的时候,会有很严重的bug。我的场景是列表页滚动了超出一屏之后,进入详情页,再点击返回列表页,在iOS上就出现了白屏的现象,但是触屏或者滑一下,页面就又恢复了。解决方案1、使用绝对定位这个也是参考了网上的写法,把列表页高度设为100%,绝对定位 .container { positio...原创 2019-09-08 18:03:10 · 5562 阅读 · 1 评论 -
iOS textarea标签 placeholder多行时被隐藏,收起键盘又显示
问题描述如下图所示,项目里用到了textarea及其placeholder属性。在iOS上输入文字后删除,placeholder文字被隐藏了,只能显示一行,收起键盘后又能正常显示原因未知解决方案1、思路动态设置标签的placeholder属性,获取输入框的值,当输入框的值为空时显示placeholder,不为空时不显示2、具体代码我的项目是用react写的,所以下面代码实现也是r...原创 2019-09-17 19:52:18 · 1477 阅读 · 0 评论