iOS上H5一些兼容性问题

图片展示需要添加代码：htmlString = [NSString stringWithFormat:@"img{width:%f !important;height:auto}%@", imageWidth, htmlString];`htmlString = [NSString stringWithFormat:@"body{font-family: '%@'; font-size:%fpx...

H5 IOS兼容问题 Q1：设置背景色和边框不生效 — 非必然事件 Q2： disabled时，整个文本框很模糊 Q3：input/textarea 不能输入 Q4：链接或可点击元素，去掉被点击后，默认的灰色背景色 Q5：去掉默认样式？ Q6：-webkit-font-smoothing: antialiased;？

触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题。input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal。CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。

H5兼容性

解决：-webkit-text-size-adjust: none;/* 禁用Webkit内核浏览器的文字大小调整功能 */2、H5界面会显示字体变大过程，不是一次就到指定字体大小。1、input 输入框 获取焦点时放大的问题。H5 兼容 ios 遇到的一些问题。原因：输入框字体是15px。解决：将字体改为16px。

就是在原生里面先写好打开原生分享的逻辑的一个函数，但是不执行，然后把调用这个函数挂载到webview.window上，然后再H5页面需要的调用的时候就直接传入函数中的参数，调用函数就可以调用原生的分享。是在原生里面通过ifream.src自定义网址并携带参数，在原生里面拦截这个接口，并且取出里面的参数，然后通过区分发来的这个接口，来的调用原生的分享。键盘不能回落问题出现在iOS12+和wechat6.7.4+中，而在微信H5开发中是比较常见的Bug。调用的时候不刷新WebView。...

本文分享在做H5开发的时候在IOS设备上的一些兼容性问题的解决方法 1、设置overflow-y时滚动区域不流畅问题 -webkit-overflow-scrolling: touch; 2、键盘弹起收缩后区域留白问题 window.scroll(0,0) 3、new Date(str)报错问题 是因为低版本的safari浏览器对new Date(str)有严格校验，对于诸如2017-08-3...

H5在安卓和ios设备上的兼容性问题1. ios 表单元素 input 和textarea 默认有内阴影2. ios上input的focus()、autofocus无效处理3. ios上长按事件会出现选中文字和弹出默认菜单4. touch事件和click事件混用 出现的bug5. ios页面内点击事件弹框 页面底部带出白框6. ios上键盘弹出会将页面往上顶 1. ios 表单元素 input 和...

20号新推送的IOS13给很多app厂商和RD带来了便秘的感觉，目前复现的问题如下，后续还会持续更新： 1.H5 hybrid输入框导致的页面上移，卡住不动。收起减半后，页面出现半截白屏。（IOS12 + IOS13） IOS12会在键盘弹出时将页面上推，并压缩body的高度。 IOS13会在键盘弹出时将页面上推，但html，body的高度全部不变。 目前移动端的输入框不外乎一下...

出现问题iOS手机出现滚动问题，滚动到底部然后下拉出现卡顿甚至卡死到底部划不动；原因仔细查看之后发现出现了双滚动条解决办法找出每一层的样式包含滚动的元素，找出滚动dom，设置滚动domoverflowhidden。...

下面是一段在umi中的配置，仅举例，不使用umi的情况可以自己看加到具体位置。完美解决问题，避免使用js来判断环境再去设置样式的复杂操作。代码中使用：（直接使用css样式）

推测可能是Android在排版计算的时候参考了primyfont字体的相关属性（即HHead Ascent、HHead Descent等），而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上，而原生Android下中文字体是没有family name的，导致匹配上的始终不是中文字体，所以解决这个问题就要在font-family里显式申明中文，或者通过什么方法保证所有字符都fallback到中文字体。单位面积内的像素越多，图像的效果就越好。

iPhoneX对比起以前其他的手机，屏幕顶部变成了刘海屏，底部取消了物理按键改成了小黑条，这种改动导致了web开发产生了新的适配问题。此时，h5页面嵌入app之后，网页内容完全覆盖可视窗口(包含刘海儿+ 小黑条)。我们可以根据自己的需求来动态设置。tips: 一半这种固定定位 小黑条的颜色会和这块元素颜色一致，因此设置padding即可～因此在底部这块区域定位时，我们需要给这块底部元素添加padding，padding值为。如下图，这是一个弹框，我们希望弹框底部的按钮不要与小黑条重合，此时有两个解决方案。

h5开发遇到的ios兼容性问题

用vue写的h5项目解决ios12语法兼容性问题

最好在代码中不要主动focus()，可能会在真机上引起页面布局被iOS 软键盘顶上去，而Android、Google、Safair 中则正常。

H5在iOS上的滚动兼容问题

日期兼容性问题 const t = '2021-09-10'; // 在ios中 会报错 invalid Date new Date（t）; // invalid Date new Date('2021/09/10') // ios 可以正确识别 这种格式的日期 overflow 导致的 问题 <div class='parent'> <div class='child'> <img src='xxx' /..