RWD導覽列2(RWD navigation bar)
接下要決定導覽列該呈現什麼樣子,假設我們希望呈現的方式如下
在電腦上的樣子:
在手機或是平板上的樣子:
既然已經決定好要呈現什麼樣子的導覽列,我們就慨要完成了!
但是還有一個問題,我們該如何知道使用者目前是使用電腦、手機或是筆電呢?
我們可以使用螢幕的比例來判斷,長寬比例為1:1是個重要的判斷依據。因為很少有裝置的螢幕比例為1:1,也就是正方形。
電腦螢幕通常為橫向的螢幕,也就是長小於寬這時我們可以用長寬比例小於1:1來確定裝置為電腦。
至於手機則是長大於寬,這時我們可以用長寬比例大於1:1來確定裝置為手機。
上一次提到的window.innerWidth(取得瀏覽器視窗的寬)、window.innerHeight(取得瀏覽器視窗的長)就派上用場了。
- window.innerHeight / window.innerWidth < 1
裝置為電腦 - window.innerHeight / window.innerWidth > 1
裝置為手機