# **體驗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的顯示效果 :-:  :-: