# T1-new-v7 code review ###### tags: `好想工作室` 2022.03.31（Thu.）（Chris） 2022.04.01（Fri.）～2022.04.01（Fri.） > 參考資料：[《Chris 技術筆記》認識 meta viewport](https://dwatow.github.io/2019/04-16-meta-viewport/) > 參考資料：[消除viewport的疑惑-移动网页开发](https://www.zybuluo.com/gongzhen/note/170557) > 參考資料：[Viewport mdn](https://developer.mozilla.org/zh-TW/docs/Glossary/Viewport) > 參考資料：[CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport #21](https://github.com/jawil/blog/issues/21) > 參考資料：[【CSS】px是相对单位还是绝对单位？](https://www.zhihu.com/question/67571440) > 參考資料：[像素（px）到底绝对单位还是相对单位](https://blog.csdn.net/lianfengzhidie/article/details/86663715#comments_13594720) > 參考資料：[【CSS】绝对单位和相对单位](https://www.jianshu.com/p/80c960ba888b) > 參考資料：[CSS 像素 MDN](https://developer.mozilla.org/zh-TW/docs/Glossary/CSS_pixel) > 參考資料：[CSS Values and Units Module Level 3](https://www.w3.org/TR/css-values-3/) > 參考資料：[简单聊下响应式布局](https://https://hddhyq.github.io/2019/01/15/%E7%AE%80%E5%8D%95%E8%81%8A%E4%B8%8B%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/) > 參考資料：[转: 关于viewport的理解](https://www.cnblogs.com/stephenykk/p/3822441.html) > 參考資料：[移动前端开发之viewport的深入理解](https://www.cnblogs.com/2050/p/3877280.html) ## Step 1 ```2022.03.31（Thu.）``` 先從Angela提供的資料：「[《Chris 技術筆記》認識 meta viewport](https://dwatow.github.io/2019/04-16-meta-viewport/)」開始看。 可先初步從中得知viewport分成了兩類： 1. visual viewport 2. layout viewport 可以想像visual viewport就是在視窗中可見的區域，所以visual viewport外面的內容是看不見的，除非我們用滾輪把內容滾到視窗的可見區域，也因此visual viewport通常是比較小的。 然後layout viewport目前對他的感覺，像是body所佔的範圍（？），然後會有個預設值980px，這樣當visual viewport縮到很小的時候，layout viewport還是佔有980px的寬度，才不至於使網頁內容被壓縮而跑版。 另外layout viewport布局視窗裡的內容大小、形狀是不會改變的 （不知道對不對，反正是目前的想法） ![](https://i.imgur.com/xlyr7fg.jpg) ## Step 2 ```2022.04.07（Thu.）``` ```2022.04.14（Thu.）``` 再來看[CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport #21](https://github.com/jawil/blog/issues/21) * 可以先知道css長度單位中分成了相對與絕對單位 * PX(CSS pixels) * 這篇文章中提到px是相對單位，相對的是設備像素（device pixels） * 在[w3c](https://www.w3.org/TR/css-values-3/#absolute-lengths)中提到px是絕對單位 * 在這個[論壇](https://www.zhihu.com/question/67571440)裡面有相對，也有絕對單位的論述 ——> 決定先不糾結在這上面 * 可以知道不同的物理設備，物理像素的大小是不同的，所以css希望在瀏覽器中1css像素的大小在不同物理設備上看起來是差不多大小的（目的是保證閱讀體驗一致） ——> 為此瀏覽器可直接按照設備的物理像素大小進行換算 ——> [css 規範](https://www.w3.org/TR/css-values-3/#absolute-lengths)則用參考像素進行換算 * 先知道：dpi為每英吋有幾個點 * 另外參考了這篇：[Rethinking the Pixel: It’s All Relative Now](https://creativepro.com/rethinking-the-pixel-it-s-all-relative-now/) * 如下圖，在距離設備一臂之遙（通常來說為28inch）處，觀看在96dpi（一英吋中有96個點）上的其中一點（即一點大小為1/96inch）時，所產生的視角，即一參考像素。 ![](https://i.imgur.com/0gCn3hT.png) * 所以說參考像素是一個視角單位，為了方便基本上還是依照設備像素去換算。 ## Step 3 ```2022.04.14（Thu.）``` 看[CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport #21](https://github.com/jawil/blog/issues/21)這篇看到1.5的部份，這裡提到了一篇文章，而此作者Peter-Paul Koch（ppk）一共寫了三篇與viewport相關的研究，因此決定開始看這幾份文件。 > 參考資料：[ppk viewport 第一篇](https://www.quirksmode.org/mobile/viewports.html) > 參考資料：[ppk viewport 第二篇](https://www.quirksmode.org/mobile/viewports2.html) > 參考資料：[ppk viewport 第三篇](https://www.quirksmode.org/mobile/metaviewport/) ## Step 4 ```2022.04.14（Thu.）``` 從[ppk viewport 第一篇](https://www.quirksmode.org/mobile/viewports.html)開始看起！ 在開頭作者說這篇將會解釋viewport和一些重要的元素（element，例如說`<html>`、window、螢幕screen）的寬度是如何運作的。 而這篇內容是關於桌面瀏覽器（desktop browser）的，而這唯一的目的是為行動裝置瀏覽器（mobile browser）與桌面瀏覽器類似的討論做好準備（set the stage for）。 他認為大多數的網頁開發者幾乎都準備好，對於大多數桌面瀏覽器概念的直觀認識了。我們也將在行動裝置瀏覽器上發現相似的概念，但是更加複雜，不過如果能事先知道一些術語的意思，可以讓我們更好理解行動裝置瀏覽器上的概念。 ### **● Concept: CSS pixel and Device pixel** 首先第一個觀念是css pixel以及他與device pixel的差異，在[step2](https://hackmd.io/nx9kE7RUQySONPM1D2vY3g?both#Step-2)中就有先初步認識了。 這裡說到無論你在任何裝置上，device width都能給出正式的解析度，而且可以利用device width讀出`screen.width`與`screen.height`（這裡應該是指`screen.width`與`screen.height`是利用device width來表示的） 此處給了幾個例子： 1. 如果你給了一個確切的元素，此元素寬度為128px，並且你的顯示器寬度為1024px，當你將你的瀏覽器螢幕最大化，則此元素的8倍將可與你的顯示器相合。（大致上） 2. 當使用者去做了縮放，放大到200%，則只需要你寬度為128px元素的4倍（2倍長、2倍寬，所以面積放大4倍），即可與那寬度為1024px的顯示器相合。 ——> 我們可以知道，當使用者做了縮放的動作時，元素的寬度並不會從128px變成256px，但我們感覺到（或看到的）寬度（可以稱作actual pixel）是放大的。正式的來說，元素的寬度仍然為128 css pixels，但他卻佔了256 device pixels 的空間。 他給了幾張圖作為說明： ```2022.05.05（Thu.）``` 1. 有4個pixels，當縮放為100%時，不會有什麼變化，css pixels會完全重疊在device pixels上方 ![](https://i.imgur.com/BP1L5kq.gif) 2. 有4個pixels，當縮小時（zoom out），css pixels（淺藍區塊）開始做縮放，可以看見此時device pixels（深藍區塊）與多個css pixels（淺藍區塊）重疊 ![](https://i.imgur.com/un9xuFC.gif) 3. 有4個pixels，當放大時（zoom in），css pixels（淺藍區塊）開始做放大，可以看見此時css pixels（淺藍區塊）與多個device pixels（深藍區塊）重疊 ![](https://i.imgur.com/ZCj1pjE.gif) #### 100% zoom 這裡對100%的放大縮小值做定義：當縮放級別為100%時，1 css pixel 等於 1 device pixel。 ### **● Screen size** 這裡將先來看一些實際的測量，首先從`screen.width`與`screen.height`兩者開始，這兩個測量值包含了使用者螢幕（顯示器）的總長、總寬，這些尺寸都是以device pixels做測量的（因為他們的長寬無法改變），`screen.width`與`screen.height`兩者是螢幕（顯示器）的特徵，而非瀏覽器的特色。 不過其實這些關於`screen.width`與`screen.height`的資訊，對我們不太重要。 ![](https://i.imgur.com/RmqXP8M.jpg) ### **● Window size** 當我們想知道瀏覽器視窗的尺寸時，可以透過`window.innerWidth` 與 `window.innerHeight` 得知瀏覽器視窗的寬高。 很明顯的可以知道，`window.innerWidth` 與 `window.innerHeight` 是以css pixels作為測量單位的。你必須知道你的布局有多少部份是可以擠進瀏覽器視窗內的，當使用者對其布局放大，視窗內可見的內容數量將會減少。所以當使用者放大，你可以在視窗中使用的範圍將會變少。 而`window.innerWidth` 與 `window.innerHeight` 透過減少可見內容的數量來做反應。 （不過有例外，有個瀏覽器叫做Opera，他的瀏覽器是以device pixels來做測量） ![](https://i.imgur.com/1lcwBbD.jpg) ![](https://i.imgur.com/VxlxAA3.jpg) ### **● Scrolling offset** `window.pageXOffset` 與 `window.pageYOffset` 包含了文件的水平以及垂直的滾動偏移量，你可以從他們的測量值得知使用者需要滾動多少的量。 `window.pageXOffset` 與 `window.pageYOffset` 他們一樣是以css pixels作為測量單位。 ![](https://i.imgur.com/EZRUc9M.jpg) ![](https://i.imgur.com/5hs400p.jpg) ### **● Concept: the viewport** viewport的作用，是去限制、約束`<html>`元素，而`<html>`元素是我們的設置中最上層的包含塊。 這樣說可能有點模糊，所以這裡有個實體的例子， ，假設你有個液體布局（liquid layout），然後你有個側邊欄（sidebar，其實這裡是什麼元素都沒關係）他的width為10%，此時當你調整瀏覽器螢幕大小時，這個側邊欄可以整齊地去放大即縮小（我覺得這裡的意思是在使用者去縮放瀏覽器螢幕大小時，側邊欄依然保持著10%的寬度不變），但是他是如何運作的呢？ 理論上來說，側邊欄是對於其父元素寬度的10%作為自己的寬度，而側邊欄的父元素，我們稱他為`<body>`（而且你不需要給`<body>`寬度），所以問題來了，`<body>`的寬度是多少呢？ 一般來說，[區塊級元素（block-level element）](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Block-level_elements)，會完全佔滿其父元素(容器)的空間（有例外，但這裡先忽略不管），也就是說區塊級元素會以父元素寬度的100%作為自己的寬度，所以`<body>`會與他的父元素等寬，而`<body>`的父元素就是`<html>`。 那麼`<html>`的寬度又多大呢？`<html>`的寬度便與瀏覽器視窗（browser window）等寬。這就是為什麼側邊欄寬度為10%會延展到柳覽器視窗寬度的10%。 先總結一下，`<body>`的寬度為`<html>`的寬度100%（再沒有任何設置的情況下），而`<html>`的寬度又與瀏覽器視窗大小等寬（讓我想起近來好想前做的[測試](https://hackmd.io/hDaL7_6GQ5iTIId27sXPBw)（？）） 那我們可能不知道上方這些的運作原理，理論上來說，`<html>`的寬度受到viewport的寬度所限制，`<html>`的寬度為viewport寬度的100%。 viewport，我們也可以說他恰好等同於瀏覽器視窗。viewport並不是HTML構成的，因此我們也無法用CSS去影響viewport，viewport就只是個擁有瀏覽器視窗的寬高的東西（在電腦上來說，換到手機上會更複雜） #### Consequences 總結 ![](https://i.imgur.com/uTXZhfg.jpg) This state of affairs has some curious consequences. You can see one of them right here on this site. Scroll all the way up to the top, and zoom in two or three steps so that the content of this site spills out of the browser window.