HTML总结05(移动适配布局)

1. 为什么要适配

适应各种移动端设备，完美呈现应有的布局效果。
各个移动端的涉笔，分辨率不一致，网页想要铺满整个屏幕，需要在各种分辨率下等比缩放。

2. 现在主流的开发思路

PC端和移动端分开开发
响应式开发，既能适应移动端，也能适应PC端。

3. 屏幕尺寸

屏幕对角线的长度，单位是英寸
一英寸等于2.54厘米

4. 屏幕分辨率

像素：由图像的小方格组成，每个小方格都有一个明确的位置和被分配的色彩值。
分辨率：在横纵方向上的像素点，单位是PX，1px=一个像素点，单位是pixels。
屏幕分辨率越高，显示效果越精细。
iPhoe 6的分辨率是1334*750像素，一般是纵向像素x横向像素来表示一个手机的分辨率。
1080P(P指的是逐行扫描经过的像素点)、2K、4K。

5.像素密度

屏幕尺寸和分辨率构成了像素密度。
是屏幕上每英寸可以显示的像素点的数量，单位是ppi，2.54cm可以显示600个像素点(一英寸)
屏幕像素密度与屏幕尺寸和屏幕尺寸有关，像素密度越高，屏幕越能以越高的密度显示图像。

6.设备像素/物理像素

显示器的最小物理单位(对于一个显示器来说是固定的)
以手机屏幕为例，是屏幕上的真实像素。
是设备出厂的时候设置的一个宽高(device pixels)

6. css像素

css像素是web开发者根据设计图表示web页面上内容大小的抽象单位，主要使用在浏览器上。
px是一个相对单位，由开发者来使用，也称为逻辑像素。
在一个标准的显示密度下(普通屏幕)，一个CSS像素对应着一个设备像素，在页面不缩放的情况下，1px的css像素==1设备独立像素。
页面被放大时，页面的设备独立像素依旧不变，放大的是css像素。但是此时CSS像素与设备独立像素的关系发生了改变，若页面放大了200%，那么1px==4独立像素(宽x2,高x2)，经过计算器计算，展示渲染时，原来的1px变成了2px。

7.CSS像素与物理像素的关系

div{width:100px}表示占据了100个像素，在普通屏幕，(pc端所有的屏幕都是普通屏幕),css像素为100px。
100像素占据多少个物理像素，取决于屏幕的特性(是否高密度、像素比)和用户的缩放行为。
在IPhone的Retina HD高清视网膜显示屏中，因为视网膜的像素密度是普通屏幕的2倍，所以这个div就占了200个设备像素，如果用户放大，将占据更多的设备像素。如iphone 6 plus就会占据300个像素点。
在正常情况下，普通屏幕中，假设ppi为100，他的九为200，每英寸显示200个像素点。

8. 设备独立像素

密度无关像素，可以认为是计算机坐标系中的一个点，这个点代表一个由程序员使用的虚拟像素(css设置的像素),然后由相关设备转换成物理像素，去显示对应的大小。
设备独立像素是一个总体概念，包括了CSS像素。
对于开发者来说，并不在意一个CSS像素到底跨越了多少个设备像素，因为CSS和JS定义的像素本质上都是CSS像素，如何显示对应的大小依赖于屏幕特性和用户缩放程度的复杂计算交给了计算机。
通过 window.screen.width/ window.screen.height 查看。

9. 像素比（dpr）

devicePixelRatio指的是物理像素和设备独立像素的比，即1独立像素由多少物理像素渲染。
window.devicePixelRatio可以查看当前的像素比。
设备的像素比devicePixelRatio = 物理像素/独立像素。

10. 位图像素

一个位图像素是栅格图像(png、jpg、gif等)最小的数据单元，至少一个位图像素对应一个物理像素，图片才能得到完美清晰的展示。
在Retina屏幕下，会出现位图像素点不够的情况，导致图片模糊的情况。
对于dpr = 2的屏幕，一个位图像素对应4个物理像素，由于单个位图像素不可以再进一步分割，所以就将去色，会导致图片模糊。
200x300的img标签，需要提供400x600的图片，在Retina屏幕下，位图像素可以和物理像素形成1:1的比例。

11. 一像素问题

因为不同设备具有不同的dpr,所代表的设备像素不同，所以在有些设备上看到的粗，有些设备上看的细。
解决一像素边框的问题：

① 通过媒体查询，查询设备的dpr,根据dpr设置不同的宽度大小。

#box{
    height: 200px;
    border-bottom:1px solid red;

}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #box { border-bottom: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    #box{ border-bottom: 0.333333px solid blue }
}
<div id = "box">
</div>

缺点：小数像素目前兼容性较为差，理论上最小的单位是1px，所以会出现有的设备写0.5px无效(没有边框)的情况。

② 借助伪元素缩放处理

.button:after{
 content: "";
   display: block;
   height: 0;
   border-top: #999 solid 1px;
   width: 100%;
   position: absolute;
   top: 0;
   right: 0;
   transform: scaleY(0.5); /* 将 1px 的线条缩小为原来的 50% */
}

缺点：不是所有的设备的dpr都是2，所以固定缩放0.5也会有问题

③ 借助媒体查询和伪元素

// 定义mixin
.border-1px(@color: rgba(7,17,27,0.2)){
  position:relative;
  &:after{
      display:block;
      position:absolute;
      left:0;
      bottom:0;
      content:'';
      width:100%;
      border-top:1px solid @color;
  }
}
// 根据不同的dpr 使用不同的缩放
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
  .border-1px {
      .border-1px;
      &:after {
          -webkit-transform: scaleY(0.7);
          -moz-transform: scaleY(0.7);
          -ms-transform: scaleY(0.7);
          -o-transform: scaleY(0.7);
          transform: scaleY(0.7);
      }
  }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .border-1px {
      .border-1px;
      &:after {
          -webkit-transform: scaleY(0.5);
          -moz-transform: scaleY(0.5);
          -ms-transform: scaleY(0.5);
          -o-transform: scaleY(0.5);
          transform: scaleY(0.5);
      }
  }
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
  .border-1px {
      .border-1px;
      &:after {
          -webkit-transform: scaleY(0.3);
          -moz-transform: scaleY(0.3);
          -ms-transform: scaleY(0.3);
          -o-transform: scaleY(0.3);
          transform: scaleY(0.3);
      }
  }
}

12. 视口

在移动端viewport(视口)就是浏览器显示页面内容的屏幕区域,在viewport中有两种视口,分别表示为：visual viewport (可视视口/视觉) 和 layout viewport (布局视口),两个视口是叠加在一起的。

13. 布局视口 layout viewport

指网页的宽度，一般移动端浏览器默认设置了布局视口的宽度，根据设备不同，默认宽度可能不同。
768、980、1024等，通过document.documentElement.clientWidth获取。
之所以采用默认设置，是为了解决早期pc端页面在手机上显示的问题。

HTML总结05(移动适配布局)

14. 视觉视口 Visual Viewport

指用户正在看到的页面区域，这个区域等同于移动设备浏览器窗口宽度。
当手机中缩放页面时，操作的是视觉视口，布局视口仍然保持原来宽度。

HTML总结05(移动适配布局)

15. 理想视口 Ideal Viewport

指对设备来讲最理想的视口尺寸。使网页在移动端浏览器上获得最理想的浏览阅读宽度。
理想视口情况下，布局视口的大小和屏幕宽度保持一致，这样就不会出现左右滚动页面。
开发中，为了实现理想视口，给移动端网页配置meta标签，通知浏览器处理。

HTML总结05(移动适配布局)

16. 常用的meta标签

<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。
<!DOCTYPE html> H5 标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′> 声明文档使用的字符编码标准的 lang 属性写法
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过 150 个字符”/> 页面描述
<meta name=”keywords” content=””/> 页面关键词者
<meta name=”author” content=”name, email@gmail.com”/> 网页作者
<meta name=”robots” content=”index,follow”/> 搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”>iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增），是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”> 启用 360 浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免 IE 使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
<meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别 viewport 的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″> 微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”>uc 强制竖屏
<meta name=”x5-orientation” content=”portrait”>QQ 强制竖屏
<meta name=”full-screen” content=”yes”>UC 强制全屏
<meta name=”x5-fullscreen” content=”true”>QQ 强制全屏
<meta name=”browsermode” content=”application”>UC 应用模式
<meta name=”x5-page-mode” content=”app”>QQ 应用模式
<meta name=”msapplication-tap-highlight” content=”no”>windows phone 点击无高光设置页面不缓存