# **体验bootstrap案例** **** # 视口ViewPort ### 什么是视口？ 虚拟窗口 每个网页默认都会有一个**视口**，视口其实是一个**虚拟的窗口** ，默认的尺寸是**980**像素;为了兼容移动设备，一般让**网页视口的宽度和设备的宽度的比例为 1:1 , 并且不允许用户缩放网页**; ### 一句话归纳 > viewport的大小决定了，css中的设置多少像素能刚好占满屏幕。例如，viewport=320,那么设置div的宽度为320px,则div刚好能占满屏幕 ### 移动设备中1px不等于1 ### 移动设备中1px不等于1个物理像素 现如今，移动设备多已经采用高倍屏，像素分辨率（物理分辨率）要比逻辑分辨率高，下表为iphone分辨率数据 | 型号 | 像素分辨率 | 像素分辨率 | 像素分辨率 | 像素分辨率 | | --- | --- | --- | --- | --- | | phone5 | 640\*1136 | 320\*568 | 320\*568 | 2 | | iphone6 | 750\*1334 | 375\*667 | 375\*667 | 2 | | iphone6 plus | 1242\*2208 | 414\*736 | 414\*736 | 3 | 第一张图片为未添加viewport的效果 :-:  第二张图片是添加了viewport的显示效果 :-:  :-: