大家好。
我是一個前端開發的新手,最近自己學著做了一個很醜陋的網站,主要是用來下載微博影片、秒拍影片等。
我想實現的功能是:在這個下載微博視頻、秒拍視頻網站的所有頁面,如果是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端)做到我的這個功能,而不會出現現在這種屏幕閃動的結果?
網路上的方法我都試過了,基本上沒有解決我的問題。
謝謝大家!
用了 bootstrap 就不用手動寫這些了
https://jsfiddle.net/straybug...
這麼寫,覺得大小調整的話按 xs -> sm -> md 往上調
幾個方法
把這部分的onload寫到頁面頂部。
在伺服器做這個判斷
使用媒體查詢,根據螢幕解析度來寫樣式。