ios 下 beforeunload 事件废弃了，需要使用 pagehide 事件替代。
3、Android 下，点击 input 框键盘将页面顶起
// html
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @focus="focus" />
// js
focus () {
const u = navigator.userAgent;
const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; // 判断机型，android终端
if (isAndroid) {
const that = this
const originalHeight = document.documentElement.clientHeight || document.body.clientHeight
window.onresize = function () {
const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
if (resizeHeight - 0 < originalHeight - 0) {
that.$refs.input.style.bottom = `-${originalHeight - resizeHeight}px`
} else {
that.$refs.input.style.bottom = `0px`
}
}
}
},
4、iOS 点击 input 框键盘将底部按钮顶起，正常需要隐藏底部按钮
因为是点击input后触发的问题，所以应该在input聚焦时处理，也就是放在focus事件中改变页面的top值。
// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @focus="focus" />
// ...
focus () {
const u = navigator.userAgent;
const isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/) // 判断机型，ios终端
if (isiOS) {
document.body.addEventListener("focusin", () => {
// 软键盘弹出的事件处理
this.isShowFooterBar = false;
});
document.body.addEventListener("focusout", () => {
// 软键盘收起的事件处理
this.isShowFooterBar = true
});
}
}
ios：focusin 和 focusout 事件支持冒泡，分别对应 focus 和 blur 事件。
上面的方法中，之所以使用 focusin 和 focusout 的原因是：假设有多个输入框需要处理，这样就可以使用事件代理来处理多个输入框存在的情况了。
5、iOS 键盘收起，页面底部出现空白问题
输入框失去焦点的时候可以滚动下页面
// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @blur.prevent="blur" />
// ...
blur () {
window.scrollTo(0, 0)
}
6、Android 和 iOS 下，表单的 input 事件和 change 事件
ios11之后，有些情况使用 input 事件 ios 自带的输入法，当选择拼音输入时会自动输入多个字符，这是因为有时 ios 对 input 事件不兼容导致的，使用 change 事件即可解决这个问题。
ios 收起输入法时会失去焦点，触发 change 事件，但是 Android 收起输入法时并不会失去焦点，所以可以通过判断 UA（navigator.userAgent） 的方式来针对不同系统使用不同的事件。
css 兼容 1、iOS 下，input 框聚焦时出现 outline 或者阴影
input:focus{outline:none} // 去除外边框
input:{-webkit-appearance: none;}
2、Android 和 iOS 下，设置 input 框禁止选择内容
input {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
input {
-webkit-user-select: auto;
}
3、iOS 改变 input 框的默认 placeholder 属性样式
input::-webkit-input-placeholder {
color: #bbb;
font-size: 0.3rem;
line-height: normal;
}
4、iOS 下，input 框输入的内容偏上
input::-webkit-input-placeholder {
line-height: normal;
}
5、Android 下 line-height 和 height 的兼容
对于一般PC浏览器以及iOS设备的浏览器表现就是我们想要的居中效果，但是大部分 Android 设备的浏览器文字都会稍微向上偏离。
结合行高、对齐的关系 和 伪元素，可以给当前元素添加以下样式来尝试解决该问题：
&::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
margin-top: 1px;
}
6、iOS 下，解决 “input 按钮” 样式会被默认样式覆盖的问题
input, textarea {
border: 0;
-webkit-appearance: none;
}
7、iOS 下，阻止图片在微信APP内被点击放大
img { pointer-events: none; }
8、Android 下，margin-top 失效
给其父元素添加 padding-top，代替该元素的 margin-top。
9、Android 下页面出现横向滚动条，iOS 正常
给该元素设置：overflow-x: hidden;
10、Android 下给页面设置 fixed 固定定位无效，iOS 正常
给该元素设置（即设置left和top具体数值）：
position: fixed;
left: 0;
top: 0;
11、iOS 适配底部小横条（Android 机上也可以调出这个小横条的）
此方案亦可解决：H5 嵌入式开发时，让页面适配端上提供的组件。
iOS 底部有个小横条，如何保证内容不被横条遮挡呢？最好的办法就是用 CSS 来做下兼容。
viewport-fit 可设置三个值：
auto：默认值，效果与 contain 一样。
contain：可视窗口完全包含网页内容（类似于给 设置：object-fit: contain;）。
cover：网页内容完全覆盖可是窗口（类似于给 设置：object-fit: cover;）。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
env() 和 constant() 是 iOS11 新增的两个 CSS 特性，用来设定安全区域以及边界的距离。
env() 和 constant() 可设置四个值：
safe-area-inset-left：安全区域离 左边 边界的距离。
safe-area-inset-right：安全区域离 右边 边界的距离。
safe-area-inset-top：安全区域离 顶部 边界的距离。
safe-area-inset-bottom：安全区域离 底部 边界的距离。
.box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 3.87rem;
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS>=11.2 */
}
【注意】constant 和 env 的先后顺序不能换。
12、iOS 中字体加粗无效 Android 正常
这是我遇到一个奇葩问题，当时去掉 font-family 就好了。
13、iOS 下拉页面时，自定义的头部导航栏消失了
因为，iOS 自带的回弹特效不会触发 scroll 事件，也就导致 scrollTop 的值为 undefined。需要做一个兼容：默认是 0 就好了——let scrollTop = e.target.scrollTop || 0。
html 兼容 1、iOS 下，会将数字当成电话号码，导致变色
加以下meta可解决
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
浏览器 css兼容 1、浏览器标签的样式表
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
font-weight:normal;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
ol,ul,li {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
th,td {
vertical-align:middle;
}
/* custom */
a {
outline:none;
color:#16418a;
text-decoration:none;
-webkit-backface-visibility:hidden;
}
a:focus {
outline:none;
}
input:focus,select:focus,textarea:focus {
outline:-webkit-focus-ring-color auto 0;
}
2、 css3新属性，加浏览器前缀兼容早期浏览器
-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */
哪些css3属性需要加：
3、 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题
问题症状: 常见症状是IE6中后面的一块被顶到下一行
解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
4、 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案：
给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于你设置的高度。
备注： 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
5、 IE浏览器div最小宽度和高度的问题
IE不认得min-这个定义，
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
6、 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
a:link {}
a:visited {}
a:hover {}
a:active {}
7、 图片默认有间距
解决方案： 使用float属性为img布局(所有图片左浮)
8、 css hack解决浏览器兼容性
background-color:yellow0; 0 是留给ie8的
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
浏览器 js兼容 1. 事件绑定监听
标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值默认false，表示事件冒泡方式。
如果浏览器不支持 addEventListener()方法, 你可以使用 attachEvent()方法替代。
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器，ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
2. event事件对象问题
document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
var e=ev;
console.log(e);
}
document.onclick=function(){//谷歌和IE支持，火狐不支持；
var e=event;
console.log(e);
}
document.onclick=function(ev){//兼容写法；
var e=ev || window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
3. event.srcElement(事件源对象)问题
解决方法：srcObj = event.srcElement ? event.srcElement : event.target;
4. 获取元素的非行间样式值：
跨浏览器兼容解决方法：
// 获取元素属性值的兼容写法
function getStyle(dom,attr){
if(dom.currentStyle){
//兼容IE
dom.currentStyle[attr];
return dom.currentStyle[attr];
}else{
//非IE，
return window.getComputedStyle(dom, null)[attr];
}
}
5. 阻止事件冒泡传播：
js阻止事件传播，这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
6. 阻止事件默认行为：
js阻止默认事件 一般阻止a链接href，form表单submit提交
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
7. ajax兼容问题
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
//1.创建ajax对象
//只支持非IE6浏览器
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
//alert(new XMLHttpRequest());
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
// 但服务器那端是不解析这个时间的
oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
//3.发送
oAjax.send(null);
//4.接受信息
oAjax.onreadystatechange = function(){
//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了
if(oAjax.readyState==4){
//状态码,只有等于200,代表接受完成,并且成功了
if(oAjax.status==200){
alert("成功" + oAjax.responseText);
}else{
alert("失败");
}
}
};
};
};
</script>
总结
兼容性问题无处不在~
暂无评论内容