1.什麼是視口?
視口簡單理解就是可視區域大小我們稱之為視口
在pc端，視口大小就是瀏覽器視窗可視區域的大小（視窗多大，可視區域/視口就多大）
在移動端, 視口大小並不等於視窗大小, 移動端視口寬度被人為定義為了980
2.為什麼是980而不是其他的值?
因為過去網頁的版心都是980
賈伯斯為了能夠讓網頁在移動端完美的展示, 所以將ios手機視口的大小定義為了980
後來谷歌也覺得這是乙個非常牛x的方案, 所以android手機的視口也定義為了980
3.移動端自動將視口寬度設定為980帶來的問題——內容被縮小
雖然移動端自動將視口寬度設定為980之後讓我們可以很完美的看到整個網頁
但是由於移動端的物理尺寸(裝置寬度)是遠遠小於視口寬度的
所以為了能夠在較小的範圍內看到視口中所有的內容, 那麼就必須將內容縮小
4.如何保證在移動端不自動縮放網頁的尺寸?——視口大小同可視區域大小
通過meta設定視口大小
移動端視口概念
有時會使用百分比來宣告寬度,如 html,body div假設div是body的子元素，這段css就表示該div佔body寬度的30 body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100 同樣的，html也沒顯示宣告寬度，因此html也佔父包含塊的100 等等 html的父包...
視口概念 移動端視口適配
視口 檢視視窗,頁面中html元素的顯示大小 移動端 頁面要想在移動端載入必須進行視口的適配 如果不對頁面進行調整,那麼在移動端載入頁面視口寬度都為980px 解決方案 源資訊標籤,對頁面進行設定 表示對頁面視口進行約束 1 做移動端適配新增此標籤,使得頁面不再按照980px載入,按照所用裝置載入 ...
移動端視口（viewport）和布局
兩種畫素 物理畫素和 css 畫素。物理畫素 解析度，裝置螢幕的物理畫素。css 畫素 由web開發者提供，是 css 中使用的乙個抽象單位。三個視口 布局視口 layout viewport 視覺視口 visual viewport 和理想視口 ideal viewport 布局視口是移動端預設的...