我想,我会架一支鱼竿,独钓岁月那一边的故事。

移动端开发基础知识

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>

3.rem适配(点击查看示例)

4.弹性盒模型(box版和flex版)