前端自适应适配规则
felx兼容性问题
最重要一点
再次实践证明，当父元素为display:flex，子元素为position:absolute时。在苹果6s/6P（ios10）的系统下会出现兼容问题，子元素无法居中。所以当子元素要用position:absolute，父元素不能是flex布局。否则会出现兼容问题（chrome开发工具测不出问题，真机才能测出问题）
首先通用文件适配器
等于屏幕宽度除以设计搞宽度*100除以16
在这里我一个一个解释
首先1.屏幕宽度等于你当前的屏幕宽度
2.设计搞宽度取决与你的ui宽度 ，我的ui给我的是640px
3.乘以100 很多人就很离谱这个都不解释，你还写个锤子博客，100是你的基准值，也就是你使用的切图工具的基准值，一般这个是可以自己设置的不是死的，打个比方，ui给你的设计搞是640px，设置基准值为100之后应该是6.4rem
4.除以16就是你的字体，浏览器默认字体大小
最终实现效果
@charset "utf-8";
html,
body {
width: 100%;
height: auto;
margin: 0 auto;
font-family: "宋体";
font-size: 16px;
-webkit-text-size-adjust: none;
}
html {
font-size: 16px !important;
//初始字体大小,我的设计稿是640px,基准值是100
}
@media only screen and (min-width: 320px) {
html {
font-size: 312.5% !important;//320/640*100/16
}
}
@media only screen and (min-width: 360px) {
html {
font-size: 351.56% !important;//同理360/640*100/16
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 366.21% !important;
}
}
这已经很详细了，实在不懂得可以留言
在解释一下 -webkit-text-size-adjust: none;
-webkit-text-size-adjust的用法如下：
1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用
html{-webkit-text-size-adjust:none;}
顾名思义, 禁用Webkit内核浏览器的文字大小调整功能。
如果要打开缩放功能,则定义下面的全局样式：
*{-webkit-text-size-adjust:auto !important;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
//这上面具体什么用我也不知道，公司前辈留下的，可以自行百度
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
//其实在这里就已经禁止缩放了所以我也不知道上面那个-webkit-text-size-adjust:auto !important;有没有用，两个都写总不会错的
//viewport-fit=cover 这个属性是用来消除苹果头部导航的，我试过了没效，但还是写出来各位小伙伴可以尝试以下
<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="./css/base.css" />
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
最后总结兼容性（iOS，Android）
1.先上模板
<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">
写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
2.禁止复制、选中文本
.el {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
3.苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden; 给不同屏幕大小的手机设置特殊样式
max-device-width真实的设备宽度
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
4.IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应
5.方法：可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
6.ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,textarea {
border: 0;
-webkit-appearance: none;
}
7.消除 IE10 里面的那个叉号:
input:-ms-clear{display:none;}
8.手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象 flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。
.box{
display: -webkit-box;
/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
9.input 的placeholder属性会使文本位置偏上
line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法
input type=number之后，pc端出现上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
10.实现android和ios系统手机打开相机并可选择相册功能
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机，是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isIos) {
$("input:file").removeAttr("capture");
};
})
11.移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
解决代码：
document.addEventListener('touchstart',function() {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
12.移动端点透问题
touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。
解决：
1.尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
2.用fastclick，https://github.com/ftlabs/fastclick
3.用preventDefault阻止a标签的click
4.延迟一定的时间(300ms+)来处理事件 （不推荐）
5.以上一般都能解决，实在不行就换成click事件。
下面介绍一下touchend事件，如下：
$("#haorooms").on("touchend",function(event) {
event.preventDefault();
});
6523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
