移动端开发中，关于适配问题的一点总结(一)
我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。
下面这段代码，做过移动端项目的同学一定不会陌生。
假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。现在我把自己的一些心得分享出来，给大家参考。下面我就关于
像素，视口，分辨率，meta视口
相关的内容展开叙述。
要实现像素级还原，首先我们要搞清楚什么是像素。
#像素
像素(pixel) 是网页布局的基础，web开发者，包括设计师，凭直觉去使用它。我们好像对它很熟悉，但依然还有很多关于这个基础构建模块的东西需要我们去学习。例如，一个像素到底是什么。
乍一看，这似乎是个非常简单的问题，一个像素就是计算机能够显示一种特定颜色的最小区域。屏幕上像素越多，你就看到的越多。或者说，同样尺寸的设备，像素越多，效果就越细腻。
对于开发者来说，给一个元素设置 width : 200px ;会发生什么事情呢？
//废话 lol ，就是给它设置宽度200px 呗，stupid question..
但要注意的一点是，这里定义的200px 并不是上面提到的设备像素。
像素分为两种：
1.CSS像素：为web开发者创造的，在CSS 和JavaScript 中使用的一个抽象的层。
2.设备像素： 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
width : 200px ; 这个声明 表示，这个宽度为200px的元素跨越了200个CSS 像素，200个css像素相当于多少个设备像素取决于屏幕和用户的缩放，
比如，在苹果的视网膜设备上，以5s为例，其像素密度是普通屏幕的两倍，那这个元素就跨越了400个设备像素。如果用户放大，那它将跨越更多的设备像素。
我们使用的时候，只是去定义它的css像素尺寸就行了，关于它用了多少设备像素，就不是我们去计算了，浏览器会进行计算的。
＃视口
我们一直在使用这行代码，但是这样写有什么用 ？ 加了这个和不加这个到底有什么区别？
要解释这个问题，我们首先要了解一个概念 - 视口
在解释视口之前，我们先回顾一下CSS的基础：
css中，在没有声明任何宽度时，每个块级元素的默认宽度都是100% 。那这个100% 是相对于什么的100% 呢？ 对了，是它父元素的100% 。 每一个css百分比都是根据它的父元素的宽度来进行计算的，所以宽度为父元素 宽度的100% ，本质是：
这里，div.aside占用了它的父元素 body 宽度的100％，但我们没有给body 定义宽度，因此，它占用了它的父元素，也就是html 宽度的100% 。但，我们同样也没有给它定义宽度。因此，它占用的是它的父元素宽度的100% ;
那html 的父元素是谁呢 ？
这就是要说的 视口了。
在CSS文档中，它叫做 初始包含块。
这是百分比计算的根源，它给css布局限制了最大宽度。
在pc 浏览器中，视口的宽度 和浏览器窗口的宽度是一致的（先不管margin 和padding）,html ,body 元素的宽度都和浏览器窗口的宽度一致。
测试走起：
测试结果表明上面的叙述是对的，这不是什么开创性的发现，只是方便下面的讲述。
布局视口
小屏幕的移动端设备，主要是手机和部分平板（屏幕特别巨大的除外＝ ＝ ），如果让视口的宽度和浏览器宽度 保持一致的话，会导致一个结果-------页面很丑。
手机，平板，浏览器的宽度一般在240-640像素之间，而大...大多数给pc设计的宽度至少为800，一般是960，或者1080。因此，如果用手机去看刚才的那个页面，宽度20%的aside将会非常窄。
如图：
一个为桌面设计的网站 在780～ 1260px 的视口中应该会显示的很好，20% 宽度的元素也会大致像设计师希望的那样。如果移动端的浏览器也能展示为pc设计的网站，大家一定会很开心。
但是这是有代价的，如上图，如果移动端浏览器遇到了没有为移动端做优化的网站，它会尽可能的缩小网站让用户看到网站的全貌。所以就显得很挤，字体很小，阅读性很差。
这样用户就只有通过放大，去看想看的信息。
在手机上，视口与移动端浏览器屏幕宽度不再关联，而是完全独立的了。
这个视口，叫布局视口，css布局会根据它来计算，并被它约束。
如图：
左图是在chrome 中放大之后的效果，图右是在手机中，放大后的效果，仅为说明两个视口的关系。
视觉视口
字面意思，它是用户正在看到的网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
一般情况下，视觉视口对于开发人员来说并不是那么重要，到那时如果有需要看到用户正在看什么区域的需求，可以用js来获取。
##理想视口
首先来解释一下这个概念
默认情况下，移动设备的布局宽度为768～1024像素，虽然这能让桌面网站不被压扁，但这并不是理想情况，尤其是对于小屏幕的使用者，因为在狭小的屏幕上，更适合狭小的网站。
简单的说，就是，布局视口的默认宽度并不是一个理想的宽度。
这就是 苹果 和其他效仿苹果的 浏览器厂商 引进理想视口的原因。
理想视口，对设备来讲，是最理想的视口尺寸。
显示在理想视口中的网站拥有最理想的宽度，不需要缩放。
但，只有当网站是手机（或者平板）的时候，才应该使用理想视口。
所以，这行代码：
就是告诉浏览器，我要使用理想视口了。
让布局视口的宽度和理想视口的宽度一样。
哦，对了，只有我们人为添加这段代码，理想视口才会生效，否则，布局视口将会维持默认宽度。
缩放
首先，什么是缩放...
从技术上讲，缩放就是放大或者缩小css像素的过程。
典型的例子就是我在手机上浏览pc端的网站，放大一点，好看清字。
但是，这个缩放会影响页面上的所有元素。
比如，宽度为200px的元素占用了200个css像素，由于这些像素被放大了，这些像素就跨越了更多的物理像素，缩小则相反。css像素的尺寸缩小了，跨越的设备像素也就少了。
所以，缩放会影响视觉视口的尺寸。
放大会使视觉视口变得更小，我们看到的内容就越少，因为屏幕上显示的css像素更少了。
缩小则会使视觉视口变的更大，使我们看到更多的部分。因为屏幕上css像素更多了。
所以，缩放程度和视觉视口的大小是逆相关的：缩放程度越大，视觉视口越小。
一个重大区别
在手机上，布局视口不会被缩放。但是在pc上会，因为它的布局视口和视觉视口大小是一样的，不可能改变一个的同时，另一个不会变。
要注意的是：移动端的缩放虽然不会导致css布局被重新计算，但是频繁的操作会给cpu比较大的负担，耗电快，因此不重新布局对性能有很大好处。
##最小缩放 和最大缩放
initial-scale=1,maximum-scale=1"
如果允许缩放，那用户可以缩放到什么程度呢 ？
在手机上是5个因子， 换句话说就是20% － 500%。
但是安卓-webkit-不大一样,不管有没有meta指令，它的缩放范围都是4个因子（25%－400%）;
我们可以通过:
来禁止用户缩放。
分辨率
分辨率有两个含义。
1.设备每英寸的点的个数。
2.CSS 和 JavaScript 中也有分辨率的概念，不过他们并不是一回事。
物理分辨率dpi
所有的屏幕都有物理分辨率，衡量单位为DPI ,（dots per inch）.DPI 越大，画面越清晰。
另外要注意的一点，web开发者不可能知道物理分辨率，因为没法获取这个信息。有些手机通过screen.width暴露设备像素个数，但这在不同浏览器之间是不可靠的。无论如何JavaScript 都无法获取设备的物理尺寸。
##设备像素比 dpr
JavaScript 中，有个属性，window.devicePixelRatio ，CSS也有device-pixel-ratio 和分辨率的媒体查询，但是它们都是和物理分辨率无关的。
取而代之的是，他们提供了设备像素个数和理想视口的比，成为设备像素比，device pixel ratio,简称DPR。
官方文档的描述如下：
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips。
dips:device-independent pixels
设备独立像素，就是独立于设备之外的像素，也就是css像素。
比如：5s的物理像素为640px, CSS像素为320px,那 pdr = 640/320 = 2.
DPR不一定是整数,比如BlackBerry Z10 的宽度是768px 物理像素；CSS像素为342px,因此，它的dpr 大约为 2.25.
#meta视口
meta 视口标签 存在的目的 主要是 让布局视口的尺寸和理想视口的尺寸匹配。
Apple 发明了这个标签，其他的厂商复制了它的大部分内容。
meta 标签应该被放在<head>中，并按以下格式书写：
<meta name="viewport" content = "name= value,name = value">
每一个名/值 都是一个给浏览器的指令，以逗号分隔，常用的有5个：
width设置布局视口的宽度，为一个正整数
initial-scale设置页面的初始缩放程度 和布局视口的宽度
minimum-scale允许用户的最小缩放程度，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
user-scalable是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
完美的meta 视口
在safari中，当设置initial-scale= 1 时，理想视口的尺寸会随着屏幕的旋转改变。在竖屏时，布局视口的宽度是320px ,横屏下，是480px 或者568px.
但在ie10中却有完全相反的问题：
initial-scale = 1 时，在横屏模式下宽度也保持为320px ,但width = device-width 时，它会从320px变为480px.
所以为了在所有浏览器上解决类似的问题，我们需要如下写法：
字体和尺寸
有了上面的理论基础，我们就能愉快的处理移动端尺寸的问题了。
移动端的尺寸，主要是间距，宽高，字体，和图像 的尺寸。由于移动设备千差万别，如何才能保证效果呢？
来看一下淘宝：
要注意的有三点：
1. html 头部meat标签中的DPR
2. width,height 的 rem
3.font-size 的 px ;
rem：font size of the root element，那么rem是个单位，单位大小由根元素font-size的大小决定。
关于动态修改font-size,具体的做法，可以参考这篇文章 ,这里不再赘述。
解决移动端尺寸问题的关键就是根元素的尺寸问题。
现在普遍的做法是动态修改根元素的font-size,这样rem 会随着设备的变化有着不同的参考值，那尺寸问题就迎刃而解了。
除了使用rem,另一种做法是使用媒体查询来解决适配问题，这里暂时就不讨论了。
还有一个是字体的问题，用一幅图表达就是：
字体的问题说大不大，说小也不小，关乎到用户体验，马虎不得。
在字体的设置上，不推荐使用rem。
我的做法是根据DPR 设置字体。
当然，在开发的时候，我们不用手动去做这件事，可以借助gulp插件来解决。如果不想用gulp，也可以使用scss 来解决。
我简单定义了一下字体的mixin,基本能用，也给大家看看吧，欢迎拍砖。
也可以这样：
可以这样用：
生成的代码：
也可以看看这篇文章了解webapp 中有关字体的更多信息。
ios、android 等是不支持微软雅黑字体，为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软雅黑字体呢？
大家可能会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载.
但是这样做有两个比较突出的问题：
1.中文字库文件往往很大，一来消耗用户的流量，二来对页面的打开速度造成了延迟。
2.虽然可以用字蛛这样的工具去提取用到的字体，但是不方便后期维护。
ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
做了个小测试，下图为测试机 iphone 5s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0 三种手机中的默认中文字体和英文字体展现：
可以看出三种不同的中文字体和微软雅黑一样是无衬线字体，有无衬线只是一个小原因，而无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。
有关衬线字体和无衬线字体的差别，参考下图：
使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别。
结论：
各个手机系统有自己的默认字体，且都不支持微软雅黑.
如无特殊需求，手机端无需定义中文字体，使用系统默认.
英文字体和数字字体可使用 Helvetica ，三种系统都支持.
body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi（中文名称叫黑体-简）。设计时候一般用华文黑体来代替，两者差异微小。
#结语
第一、首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。
第二、使用
<meta name="viewport" content="width=device-width, initial-scale=1">
来得到一个理想视口。
第三、市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。
第四、使用rem 处理尺寸，使用font-size处理字体。
扫一扫
1298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
