搜尋

首頁  >  問答  >  主體

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

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

我想實現的功能是:在這個下載微博視頻、秒拍視頻網站的所有頁面,如果是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端)做到我的這個功能,而不會出現現在這種屏幕閃動的結果?
網路上的方法我都試過了,基本上沒有解決我的問題。
謝謝大家!

漂亮男人漂亮男人2735 天前470

全部回覆(2)我來回復

  • 阿神

    阿神2017-05-19 10:27:08

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

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

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

    回覆
    0
  • PHP中文网

    PHP中文网2017-05-19 10:27:08

    幾個方法

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

    2. 在伺服器做這個判斷

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

    回覆
    0
  • 取消回覆