移动端基础

xiaomo

视口的概念

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

布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。

视口标签

理想视口才是我们设计移动web需要的视口，而理想视口就是将布局视口的宽度修改为视觉视口

meta标签

<!-- meta视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

1、content属性：用来设置视口的，width属性就是视口的宽，它可以是任意数字，设为 device-width 表示设备的宽度，这就是我们需要的理想视口，当没有设置时默认会按980px去显示

2、initial-scale : 视口初始的缩放比，可设置为大于0的数字

3、user-scalable : 设置是否允许用户进行缩放，可设置为 yes / no 或 1 / 0

4、maximum-scale : 设置视口的最大缩放比，可设置为大于 0 的数字

5、minimum-scale : 设置视口的最小缩放比，可设置为大于 0 的数字

6、最标准的viewport设置

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

注意事项：

ios10 及 ios10+ 设置最大缩放值无效
initial 和 width 是有冲突的
initial 和最小值是一致的
部分安卓机型，不接受width = 具体数值这样的操作

viewport的width即使设置了固定值 ,但是设置了initial-scale这个属性后，会自动把width变成device-width(即使width不设置，也会默认设置width=device-width)

正常情况下，我们会把初始、最小、最大都设置为1，不允许用户缩放页面。但是因为maximum无效，后期，我们会通过 js 来禁止缩放

涉及显示的几个概念

物理像素与CSS像素

设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

分辨率(物理像素)

screen.height //screen.width返回显示设备的信息。
除非调整显示设备的分辨率，否则看作是常量。
(显示)分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平像素数为160个，垂直像素数128个。

分辨率越高，像素的数目越多，感应到的图像越精密。

而在屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

以分辨率为1024×768的屏幕来说，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。

PPI

pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。

手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。

这个数值是多少？按照2010年前苹果公司CEO史蒂夫·乔布斯（Steve Jobs）在iPhone 4发布会上对视网膜技术的介绍：“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”(即所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。)

一张图带你了解：视网膜屏幕

DPR设备像素比

每个设备都有属于自己的独立像素，通过浏览器的模拟器，我们可以看到，每个设备的独立像素。

DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值：
DPR = 设备像素 / CSS像素(某一方向上)
普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3

因为大部分桌面显示器的devicePixelRatio为1，所以在PC端我们感受不出来CSS Pixel 与物理像素的差别。

常见移动设备的PPI与DPR

二倍图

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如iphone6 是 750* 1334

我们开发时候的1px 不是一定等于1个物理像素的

一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

以iphone6为例，它的物理像素比是2，用css设置一张图片50 * 50的图片，此时在手机上的显示是100 * 100
的分辨率，相当于被拉伸了两倍，图片看起来就很模糊，解决办法是用100 * 100的图，再设置它的宽高为50 * 50。

lRetina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

背景精灵也是，会把精灵图 * 2，但获取它的background-position时，要先把精灵图 / 2,再去量它的位置 , 然后
设置background-size : 宽 / 2 高 / 2 ;

注：背景缩放background-size
background-size: cover　: 背景拉伸到能覆盖这个容器
background-size: contain : 背景拉伸，当宽或高其中有一个铺满，就不再拉伸了

初始化

做移动端页面时的初始化：
（1）设置视口标签

（2）引入normalize.css(是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一)

（3）去掉一些移动端的默认模式

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

移动开发的技术选型(常见布局)

1、单独做移动开发
通常情况下输入网址，会判断是PC端还是移动端打开，移动端打开就在域名前加 m. ，打开移动端的网页
PC端和移动端为两套网站，pc端是pc端的样式，移动端在写一套，专门针对移动端适配的一套网站
– 单独做移动端有下方几个技术方案

（1）、流式布局（宽度设为百分比的形式）

（2）、flex弹性布局（强烈推荐）

（3）、less + rem + 媒体查询或者 rem + flexible.js (推荐)

（4）、混合布局（推荐）

2、响应式布局

（1）、媒体查询

（2）、bootstrap

移动端技术解决方案

1.移动端浏览器兼容问题

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

可以放心使用 H5 标签和 CSS3 样式。

同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

2.移动端公共样式

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

Normalize.css：保护了有价值的默认值 / 修复了浏览器的bug / 是模块化的 / 拥有详细的文档

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

3.移动端大量使用 CSS3盒子模型box-sizing

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型：盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

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

移动端可以全部CSS3 盒子模型
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型

4.移动端特殊样式

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