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
    裝置為手機

下面顯示的是類似的效果,試著調整你的瀏覽器視窗吧!




這裡有程式碼以及結果顯示

這個網誌中的熱門文章