javascript - js如何透過判斷存取請求是否來自行動裝置來控制控制項的顯示樣式？

Question

大家好。
我是一個前端開發的新手，最近自己學著做了一個很醜陋的網站，主要是用來下載微博影片、秒拍影片等。

我想實現的功能是：在這個下載微博視頻、秒拍視頻網站的所有頁面，如果是PC端訪問的話就顯示左邊的菜單欄，也就是col-md-3，而對於Android、 iphone等行動端的存取則不顯示左邊的col-md-3選單欄，而只是顯示右邊的col-md-9部分。

我現在基本上實作了這個功能，用到的是window.onload函數，預設是把col-md-9設定為display:none, 在onload函數中若判定為pc端的請求，則把col-md -3顯示出來，這就導致PC端存取時總是會先渲染出頁面，然後螢幕閃動一下後再出現col-md-3選單。

請問各位前輩，有什麼辦法在一個url下(不區分移動端和pc端)做到我的這個功能，而不會出現現在這種屏幕閃動的結果？
網路上的方法我都試過了，基本上沒有解決我的問題。
謝謝大家！

Answer 1

用了 bootstrap 就不用手動寫這些了

https://jsfiddle.net/straybug...

這麼寫，覺得大小調整的話按 xs -> sm -> md 往上調

Answer 2

幾個方法

1. 把這部分的onload寫到頁面頂部。

2. 在伺服器做這個判斷

3. 使用媒體查詢，根據螢幕解析度來寫樣式。