〝 古人学问遗无力,少壮功夫老始成 〞
移动端兼容宝典大全,专治各种不适,你是否也曾为浏览器各种的不兼容而苦恼,尤其是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;
}
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
img {
pointer-events: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
input {
-webkit-appearance: none;
border-radius: 0;
border: 1px #ccc solid;
}
var value = '2021-03-17 22:30'; //ios不支持这种格式,只支持2021/03/17 22:30
value = 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);
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;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}