RWD導覽列(RWD navigation bar)
相關內容:RWD、導覽列、javascript
在製作網頁時，常常會發現在電腦上寫好的導覽列，在不同的螢幕大小會出現文字過多或是超出預定範圍的情況。像是以下的範例：
在電腦上的樣子：
在手機或是平板上的樣子：
首頁
項目１
項目２
項目３
怎麼會這樣！導覽列擺不下了...
很多網站在調整視窗大小時，會有導覽列內容改變的情況。文字大小、圖示改變都是可能的。使用javascript可以簡單地完成這個功能，來分析一下該如何做到吧！
- 偵測視窗或是裝置的大小
- 決定要改變哪些內容
- 開始動手做！
第一個步驟是瞭解到底使用者的視窗或裝置長、寬以及長寬的比例到底是多少。
舉例來說，假設電腦或是筆電螢幕可能長900px、寬1440px、比例約為1.6，瀏覽器的長寬也跟螢幕差不多。那我們該如何得到這些數值呢？
window.innerWidth : 取得瀏覽器視窗的寬。 window.innerHeight : 取得瀏覽器視窗的長。