极客前端|移动端兼容宝典大全，专治各种不适新星计划|经验分享

〝古人学问遗无力，少壮功夫老始成〞
移动端兼容宝典大全，专治各种不适，你是否也曾为浏览器各种的不兼容而苦恼，尤其是IE这个牛皮癣，这篇文章可能会给你帮助哦，常码字不易，出精品更难，没有特别幸运，那么请先特别努力，别因为懒惰而失败，还矫情地将原因归于自己倒霉。你必须特别努力，才能显得毫不费力。如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。
目录
一、禁止复制、选中文本
二、解决在IOS下页面滑动卡顿
三、禁止图片点击放大
四、解决input标签type为number时，pc端出现上下箭头
五、清除IOS下input标签默认样式(圆角、阴影)
六、取消IOS下默认英文首字母的默认大写
七、解决IOS下日期格式兼容
八、字体随屏幕大小自适应
【极客前端|移动端兼容宝典大全，专治各种不适】九、meta的兼容综合
十、移除所有浏览器的margin
十一、统一所有浏览器的行高
十二、IOS方向改变时字体的自适应

一、禁止复制、选中文本

body { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; }

二、解决在IOS下页面滑动卡顿

body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }

三、禁止图片点击放大

img { pointer-events: none; }

四、解决input标签type为number时，pc端出现上下箭头

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }

五、清除IOS下input标签默认样式(圆角、阴影)

input { -webkit-appearance: none; border-radius: 0; border: 1px #ccc solid; }

六、取消IOS下默认英文首字母的默认大写

七、解决IOS下日期格式兼容

var value = 'https://www.it610.com/article/2021-03-17 22:30'; //ios不支持这种格式,只支持2021/03/17 22:30 value = https://www.it610.com/article/value.replace(/-/g,"/");

八、字体随屏幕大小自适应

(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

九、meta的兼容综合

十、移除所有浏览器的margin

html, body, iframe, canvas, form, blockquote, fieldset, code, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, table, thead, tbody, td, tr section, menu, nav, header, footer, aside, article, figure, figcaption, hgroup, legend, summary, details, command, progress, dialog { margin: 0; padding: 0; }

十一、统一所有浏览器的行高