常见的移动端兼容问题以及解决方案

禁止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;
}

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

常见的移动端兼容问题以及解决方案相关推荐

android半透明闪退,移动端常见面试题一：移动端兼容解决方案
原标题:移动端常见面试题一:移动端兼容解决方案移动端经常出现的兼容问题 1.安卓浏览器看背景图片,有些设备会模糊因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机devicePi ...
PC电脑端常见蓝屏代码自检测与解决方案
PC电脑端常见蓝屏代码自检测与解决方案我将常见的电脑蓝屏情况都收集了一下,进行了整理,希望对各位不会修电脑的妹子用得到,不要影响it大佬的时间,哈哈哈 1.0X0000000A 问题故障:软件性冲突 ...
常见前端浏览器兼容问题及解决方案
常见前端浏览器兼容问题及解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站 ...
移动端H5常见问题以及解决方案
移动端H5常见问题以及解决方案问题下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢! 以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问 ...
【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容） – 叶小钗
这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获在下才疏学浅,文中难 ...
移动端placeholder不能垂直居中解决方案
移动端placeholder不能垂直居中解决方案参考文章: (1)移动端placeholder不能垂直居中解决方案 (2)https://www.cnblogs.com/lalalagq/p/990 ...
Web移动端Fixed布局的解决方案
Web移动端Fixed布局的解决方案参考文章: (1)Web移动端Fixed布局的解决方案 (2)https://www.cnblogs.com/sxgxiaoge/p/9257648.html 备 ...
常见几种浏览器兼容性问题与解决方案
常见几种浏览器兼容性问题与解决方案参考文章: (1)常见几种浏览器兼容性问题与解决方案 (2)https://www.cnblogs.com/lmaster/p/6385035.html 备忘一下.
[css] 举例说明微信端兼容问题有哪些？
[css] 举例说明微信端兼容问题有哪些? 说一个微信小程序的iPhoneX适配吧, 因为iPhoneX底部没有虚拟按键,底部的横线会出现遮挡这时候就要处理下: 大概思路就是获取到客户端设备,然后判断 ...

常见的移动端兼容问题以及解决方案

常见的移动端兼容问题以及解决方案

常见的移动端兼容问题以及解决方案相关推荐

最新文章

热门文章