常见的移动端兼容问题以及解决方案 禁止ios识别长串数字为电话

解决方法：添加 meta 属性

<meta content="telephone=no" name="format-detection"> 禁止 ios 弹出各种窗口

解决方法：添加全局 CSS 样式

-webkit-touch-callout:none; 禁止 Android 手机识别邮箱

解决方法：添加 meta 属性

<meta content="email=no" name="format-detection" /> 禁止 ios 和 Android 用户选中文字

解决方法：添加全局 CSS 样式

-webkit-user-select: none; ios 环境下，取消 input 输入框在输入时英文首字母默认大写

解决方法：给 input 标签加上相应属性

<input autocapitalize="off" autocorrect="off" /> Android 环境下取消语音输入按钮

解决方法：input 框添加样式

input::-webkit-input-speech-button { display: none; } 修改移动端的点击高亮效果（ios，Android均有效果） -webkit-tap-highlight-color: rgba(0,0,0,0); ios 环境下 input 按钮设置 disabled属性为 true 时显示异常 input[type=button]{ opacity: 1; } 移动端字体小于 12px 时的异常显示

解决方法：可以先使用整体放大1倍（width、height、font-size等等），再使用 transform 进行缩小

在移动端图片上传图片兼容低端机的问题

解决方法：input 加入 accept=“image/*” multiple 属性

在 Android 环境下 placeholder 文字设置行高时会偏上

解决方法：input 有 placeholder 属性时不要设置行高

当设置样式 overflow:scroll 或 auto时，在 IOS 上滑动会出现卡顿 -webkit-overflow-scrolling: touch; 移动端 click 事件存在延迟的问题 window.addEventListener("load",function () { FastClick.attach(document.body); },false); 移动端1px边框问题 .box{ position: relative; border: none; } .box:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; transform: scaleY(0.5); transform-origin: 0 0; }

这里是万物之恋，我们下次再见了！

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。