移动端开发之基础概念（视口、物理像素、设备像素比、多倍图、特殊样式、技术方案...）

视口（viewport）

布局视口、视觉视口与理想视口

布局视口：用于解决早期PC端页面在手机上显示的问题。iOS和Android基本将这个视口分辨率设置为了980px。所以PC端网页大多能在手机上呈现，但元素和字看上去很小。

视觉视口：是用户正在看到的网站的区域。可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原有宽度。

理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定的（即不需要缩放或横向滚动即可查看网站所有内容），此视口适用于已专门适配移动端的网站。需要添加viewport元标签使布局视口和理想视口的宽度一致（width=device-width。即设备有多宽，布局的视口就有多宽）。

viewport元标签

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

• width：设置视口宽度（可设置为device-width，也可设置为像素值）【推荐为device-width】。
• user-scalable：用户是否可以缩放（yes/no）【推荐为no】。
• initial-scale：初始缩放倍数【推荐为1.0】。
• maximum-scale：最大缩放比【推荐为1.0】。
• minimum-scale：最小缩放比【推荐为1.0】。

物理像素、设备像素比、多倍图

物理像素

指屏幕上的像素点，是物理真实存在的，厂商在出厂时就设置好的，比如苹果6/7/8的物理像素是750*1334。

设备像素比

在PC端页面，1px就是1个物理像素，但是在移动端就不一定是1个物理像素了。
早期的手机屏幕和PC端一样是1px就是1物理像素，但Retina显示屏技术，将更多的物理像素点压缩在一块屏幕里，提高了手机的分辨率，使显示效果更加细腻（即 1px等于2物理像素 比 1px等于1物理像素 的显示效果更加清晰细腻）。
一个px能显示的物理像素的个数就称为设备像素比（window.devicePixelRatio）。

<!-- 
  例如，375px在1920px宽的PC端，实际占有像素量（物理像素）是375px，但在750px宽的iPhone8，实际占有像素（物理像素）是750px。
  因此在iPhone8（750*1334）里，1px等于2个物理像素，即设备像素比为2。 
-->
<div style="width: 370px;height: 375px;background-color: pink;"></div>

多倍图

概念

例如，对于一张50*50的图片在iPhone8(Retina屏)打开，会按照设备像素比放大倍数（实际占有的物理像素为100*100），这样会造成图片模糊。这个问题可以通过使用倍图来解决。
通常使用二倍图（适配iPhone6/7/8），但也存在需要使用三倍图、四倍图的情况（按照设备像素比来）。
把准备的100*100的图片（二倍图）缩放为50*50即可在iPhone8里达到显示清晰细腻的效果。

<img src="./img/apple(50px).jpg" alt="" style="width: 50px;height: 50px;" />
<img src="./img/apple(100px).jpg" alt="" style="width: 50px;height: 50px;" />

缩放方法

对于<img />图片的缩放，直接使用width和height即可。

对于background图片的缩放，使用background-size属性即可。

对于CSS Sprites图片的缩放，则分为以下步骤（以二倍图为例）：

• 将精灵图放到图像处理软件（PS/Firewords），限制宽高比例，然后按比例缩小到宽度的一半。
• 使用切片工具按需要的宽高量取要用的精灵图，得到坐标点。
• 写代码：使用background-position填入坐标点；使用background-size将CSS Sprites图的宽度设置为原有宽度的一半，高度不设或者为auto，即可完成。

特殊样式

// a标签在移动端点击时会出现背景色变蓝的情况（高亮）。
-webkit-tap-highlight-color: transparent; //设置为透明，去除高亮。
// 在iOS端，input控件会带有默认样式。
-webkit-appearance: none; //去除iOS端input的默认样式，方便自定义样式。
// 对于图片和链接，往往不需要长按页面弹出菜单。
img,a{-webkit-touch-callout: none;}  //禁用长按弹出菜单

移动端技术方案

目前移动端的技术方案大致分为两种：

1. 单独制作移动端页面（主流）
2. 响应式页面兼容移动端（在实际开发中会涉及到许多兼容性问题）