PC端與移動端的縮放問題

標籤：a標籤   尺寸   device   css   縮放   放大   像素   面積   標籤   

總結

在布局視口，CSS像素不會發生個數上的變化，那麼說，一個大頁面上，所有CSS像素都是固定住的，是不變的當使用者縮放操作時，在視覺視口上操作，但是，視覺視口永遠螢幕那麼大，而且我看東西都是通過螢幕看，換句話說，我們看東西，看到的東西有限縮放操作，改變的是CSS像素的面積，放大操作，CSS像素的面積變大，一個CSS像素裡對應的物理像素變多（物理像素在螢幕上，固定不變的）所以，通過視覺視口看CSS像素麵積增大，相應的個數變少因為我視覺視口呈現的大小固定不變，縮放不會影響布局視口的尺寸大小，只不過面積發生變化布局視口，視覺視口，理想視口其實最終代表的都是螢幕的尺寸在螢幕這一塊尺寸中，不同的視口它包含了多少個css像素的個數（布局視口裡麵包含的css像素個數不變,視覺視口，理想視口會隨縮放而改變）布局視口：    預設情況下               980個css像素       加meta標籤後            裝置獨立像素所代表的值 width = device-width視覺視口：    預設情況下                       裝置獨立像素所代表的值         使用者放大或者系統放大時   視覺視口所包含的css像素的個數變少    使用者縮小或者系統縮小時   視覺視口所包含的css像素的個數變多理想視口    由於理想視口只在加meta後才會出現，理想視口的尺寸等於裝置獨立像素所代表的值布局視口 = 視覺視口 = 理想視口

PC端與移動端的縮放問題