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. 使用媒体查询，根据屏幕分辨率来写样式。