1.手机浏览器现状

• 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，兼容移动端主流浏览器，处理webkit内核浏览器即可。

  2.手机屏幕

• 移动端设备屏幕尺寸非常多，你会见识过很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920……

• ppi：Pixels Per Inch也叫像素密度单位，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。

• Retina屏：所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，也称为视网膜显示屏。移动电话显示器的像素密度达到或高于300ppi就不会再出现颗粒感。
• dpr = 物理像素 / 逻辑像素(CSS和JS设置的代码)
• 在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始，苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI太高，人无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是DPR = 2 | 手机型号 | 尺寸（对角线） | 逻辑像素(px) | 物理像素 | 倍数dpr | | —- | —- | —- | —- | —- | | iPhone 4/4S | 3.5英寸 | 320x480 | 640x960 | @2x | | iPhone 5/5S/5C | 4英寸 | 320x568 | 640x1136 | @2x | | iPhone SE | 4英寸 | 320x568 | 640x1136 | @2x | | iPhone 6 | 4.7英寸 | 375x667 | 750x1334 | @2x | | iPhone 6 Plus | 5.5英寸 | 414x736 | 1242x2208 | @3x | | iPhone 6S | 4.7英寸 | 375x667 | 750x1334 | @2x | | iPhone 6S Plus | 5.5英寸 | 414x736 | 1242x2208 | @3x | | iPhone 7 | 4.7英寸 | 375x667 | 750x1334 | @2x | | iPhone 7 Plus | 5.5英寸 | 414x736 | 1242x2208 | @3x | | iPhone 8 | 4.7英寸 | 375x667 | 750x1334 | @2x | | iPhone 8 Plus | 5.5英寸 | 414x736 | 1242x2208 | @3x | | iPhone X | 5.8英寸 | 375x812 | 1125x2436 | @3x | | iPhone XS | 5.8英寸 | 375x812 | 1125x2436 | @3x | | iPhone XS Max | 6.5英寸 | 414x896 | 1242x2688 | @3x | | iPhone XR | 6.1英寸 | 414x896 | 828x1792 | @2x | | iPhone 11 | 6.1英寸 | 414x896 | 828x1792 | @2x | | iPhone 11 Pro | 5.8英寸 | 375x812 | 1125x2436 | @3x | | iPhone 11 Pro Max | 6.5英寸 | 414x896 | 1242x2688 | @3x |

3.二倍图与三倍图

• 对于一张 50 x 50px 的一张图片，在Retina屏中打开，按照物理像素比，图片会被放大到二倍，会造成图片模糊，所以我们开发中会使用二倍图
• 相当于UI设计师给你一张iphone6的设计稿，尺寸是 750x1334，这上面的图片我们给切出来，尺寸是100 x 100px，然后我们在代码中给这个二倍图img{width:50px;height:50px;}，就可以解决图片模糊问题了。
• 我们一般都会处理img和背景图尺寸的

• 扩展：cutterman切图神器

  3.1扩展：如何根据分辨率切换不同图片

• 1.关于移动端浏览器像素缩放比：window.devicePixelRatio

  var img = document.querySelector("img")
  if (window.devicePixelRatio == 2) {
    img.src = "二倍图.jpg"
  }
  if (window.devicePixelRatio == 3) {
    img.src = "三倍图.jpg"
  }

• 2.给img设置 <img src="图片1.jpg" srcset="图片2.jpg 2x, 图片3.jpg 3x"

  4.视口

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

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

标准视口

• 页面的宽度和设备样宽
• 默认的缩放比例是1.0

• 不允许用户去缩放页面

  5.移动开发选择

• 通过判断设备，如果是移动设备打开，则跳转到移动端页面

  • 京东，移动设备，刷新

• 响应式页面

  6.移动端css初始化

• 地址：https://necolas.github.io/normalize.css/

• Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于许许多多其他框架、工具和网站上。

  7.移动端特殊样式的解决办法

• 避免宽度溢出 造成横向滚动条

  • box-sizing: border-box;
  • -webkit-box-sizing: border-box;
• 点击清除背景高亮效果
  • -webkit-tap-highlight-color: transparent;
• IOS环境下的按钮都是通过美化的，加它能给按钮和输入框去掉默认样式
  • -webkit-appearance: none;

• 禁用长按页面时的弹出菜单

  • img,a {-webkit-touch-callout:none;}

    8.移动端常见页面布局

• 流式布局 / 百分比布局

  • 外层盒子要设置 min-width 和 max-width
  • 京东

    body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system,Helvetica,sans-serif;
    line-height: 1.5;
    color: #666;
    }

• flex 弹性布局 （推荐）

• calc 浮动布局

• 媒体查询 + rem 布局
• flexible.js
  • flexible.js是手淘开发出的一个用来适配移动端的js框架。框架的核心原理就是根据不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。
• vw + rem 布局

• 混合布局
• 响应式
• Bootstrap框架