meta头设置
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1">
viewport 视口(可视区窗口)
默认不设置viewport一般可视区宽度在移动端是980
width 可视区的宽度 (number||device-width)
user-scalable 是否允许用户缩放 (yes||no) iOS10无效 (我们放在事件章节解决)
initial-scale 初始缩放比例
minimum-scale 最小缩放比例
maximum-scale 最大缩放比例
像素比
// n = window.devicePixelRatio
//像素比把一个像素 放大至 N个像素去显示
//设计图最少750
默认样式
清除点击阴影-webkit-tap-highlight-color
a,
input,
button{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
消除按钮圆角-webkit-appearance
input,
button {
-webkit-appearance: none;
border-radius: 0;
}
选中文字设置-webkit-user-select
body * {
-webkit-text-size-adjust: 100%;
-webkit-user-select: none; /*在事件章节 去兼容安卓*/
}
移动端其他问题
Font Boosting
Font Boosting 在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了
解决办法:
1.设置高度
2.设置最大高度 max-height
Fixed(定位元素抖动)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<style type="text/css">
html {
height: 100%;
overflow: hidden;
position: relative;
}
body {
height: 100%;
margin: 0;
overflow: auto;
}
header {
position: absolute;
width: 100%;
height: 40px;
background: rgba(0, 0, 0, .5);
color: #fff;
}
section {
padding-top: 40px;
}
</style>
</head>
<body>
<header>我是一个头部</header>
<section>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
</section>
</body>
</html>
IOS的body的overflow问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<style type="text/css">
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
overflow: hidden;
position: relative;
}
#wrap {
height: 100%;
overflow: auto;
}
header {
position: absolute;
width: 200%;
height: 40px;
background: rgba(0, 0, 0, .5);
color: #fff;
text-align: center;
}
section {
padding-top: 40px;
}
</style>
</head>
<body>
<div id="wrap">
<header>我是一个头部</header>
<section>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
页面内容<br/>
</section>
</div>
</body>
</html>
常用适配方案
1.百分比适配
2.viewport适配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
(function(){
var w = window.screen.width;
var targetW = 320;
var scale = w/targetW; //当前尺寸/目标尺寸
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
//console.log(scale);
document.head.appendChild(meta);
})();
</script>
<!--
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
-->
<style type="text/css">
body {
margin: 0;
}
div {
width: 80px;
height: 100px;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: blue;
}
.box3 {
background: green;
}
.box4 {
background: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
4.弹性盒模型(box版和flex版)