移动web开发介绍

视口(viewport)

视口（viewport）浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口 布局视口(layout viewport)

• 一般移动设备的浏览器默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题.
• ios,android基本都将这个视口分辨率设置为980px，所以pc上的网页大多能在手机上呈现，只不过看上去很小，我们只能通过手动缩放网页。

视觉视口（visual viewport）

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

** 理想视口 (ideal viewport)**

viewport设置

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

• width 宽度设置的是viewport的宽度（device-width=设备的宽度）
• initial-scale：初始缩放比
• maximum-scale：最大缩放比
• minimum-scale：最小缩放比
• user-scalable 用户是否可以缩放

二倍图

物理像素&物理像素比

• 物理像素点是只屏幕显示的最小颗粒，是物理真实存在的，设置厂商在出厂时就设定好了的如某手机分辨率为 750*1334
• 我们在移动web开发时1px不一定等于1物理像素
• 而在pc页面1px是等于1物理像素的
• 一个px能显示的物理像素点的个数，称为物理像素比或者屏幕像素比

如下例 定义一个300*300的盒子 在pc显示正常1px=1物理像素

div{
        width: 300px;
        height: 300px;
        background-color: red;
    }

手机端的时候是这样的iphoone8的分辨率是（1334*750） 而一个300x300的盒子却快把手机屏幕占满了,这也验证了在移动web开发 1px！=1物理像素，1px或者等于1.几物理像素，或者等于2物理像素或者更多。

由于1px不等于1物理像素，如果在手机上显示一张50px*50px的图片，按照上面的情况，物理像素会放大倍数，这样会造成图片的模糊

如何解决这种情况？、 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备图片模糊的问题，通常使用2倍图也就是 我们准备的图片比我们实际需要大小的2倍，在利用css将图片缩小成原来的大小，经过移动端展示后图片会被放大，但此时不会模糊，因为图片之前就是移动端放大后的大小

img{
    width:50px;
        height:50px;
}
...
<img src="test100_100,jpg">

二倍精灵图

1. 原来的图片等比例缩放原来的一半(不保存)
2. 测量坐标
3. background-size 精灵图原来宽度的一半

css初始化

normalize.css github