前端开发常见的兼容性问题

 

手机端--------------------------

1、   在写手机端时必要需要加入meta
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2.   1px问题

手机无法出现1px

用伪类

content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #e2e2e2;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);

}

3.  删除默认的苹果工具栏和菜单栏
<meta name="apple-mobile-web-app-capable" content="yes">

4.   禁止了把数字转化为拨号链接
<meta name="format-detection" content="telephone=no">

5.  设置缓存
<meta http-equiv="Cache-Control"content="no-cache"/>
//手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

6. iphone及ipad下输入框默认内阴影
Element{
  -webkit-appearance:none;
}

PC---------------------------

https://www.cnblogs.com/oldZhangFeng/p/7251615.html