移动端web开发（一）基础知识

一、移动端基础

1.1 移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试
搭建本地web服务器，手机和服务器在一个局域网内，通过手机访问服务器
使用外网服务器，直接ip或域名访问

1.2 视口

视口（viewpoint）即浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。

1.2.1 理想视口（ideal viewpoint）

为使网站在移动端有最理想的浏览和阅读宽度而设定
最理想的视口尺寸
需要手动填写meta视口标签通知浏览器
meta视口标签的主要作用：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局视口就有多宽

1.2.2 meta 视口标签

<meta name="viewpoint" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum=1.0">

1.2.3 标准的viewport

视口宽度与设备保持一致
不允许用户缩放
视口默认缩放比1.0
最大允许缩放比例1.0
最小允许缩放比例1.0

二、二倍图

2.1 物理像素和物理像素比

物理像素点：屏幕显示的最小颗粒，是物理真实存在的，厂商出厂时就设置好了。如苹果6/7/8是750*1334
开发时1px不是一定等于一个物理像素的
PC端页面，1px=1个物理像素，移动端就不尽相同
物理像素比/屏幕像素比：1个px能显示的物理像素的个数

注意：

1、物理像素就是分辨率

在iphone8 里面 1px开发像素 = 2个物理像素

2.2 二倍图

背景：我们需要一个 50×50 （css像素）的图片直接放到iphone8里面会放大两倍变成100×100。解决方式是放一个100×100的图片，然后手动把该图片缩小到50×50

二倍图定义：我们准备的图片实际需要的大小要大两倍

工具：cutterman

2.3 背景缩放 background-size

background-size：背景图片宽度 背景图片高度
background-size：500px;
/*只写一个参数，表示的是宽度，高度等比例缩放*/

单位可以跟百分比（相对于父盒子来说）

单位：长度|百分比|cover|contain;
cover：把背景图像扩展至足够大，使背景图像完全覆盖背景区域
contain：把背景图像扩展至最大尺寸，使其宽度和高度完全适应内容区域

注意：

cover等比例拉伸，高度和宽度都要满足要求，所以可能导致部分图片显示不全
contain 是只要宽度或者高度满足要求，就不再进行拉伸，可能有部分空白区域

三、移动端主流开发方案

3.1 单独制作移动端页面（主流）

3.2 响应式页面兼容移动端（其次）

如：三星电子官网（www.samsung.com/cn/），通过判断屏幕宽度来改变样式，以适应不同终端。

缺点：制作麻烦，需要花很大精力去调兼容性问题

四、移动端技术解决方案

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题

4.1 CSS初始化 normoalize.css

移动端CSS初始化推荐使用normalize.css/

Normalize.css优点：

保护了有价值的默认值
修复了浏览器的bug
模块化的
有详细的文档

官网地址：http://necolas.github.io/normalize.css/

4.2 CSS3盒子模型 box-sizing

传统模式宽度计算：盒子的宽度= width + border + padding
CSS3盒子模型：盒子的宽度 = width （包含了border+padding，即border和padding不会撑大盒子）

注意：没有说外边距

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

4.2.1 特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮需要清除*/
-webkit-tap-highlight-color: transparent;
/*移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时弹出菜单*/
img a{
    -webkit-touch-callout: none;
}