How does js control the display style of a control by determining whether the access request comes from a mobile device?

Question

Hello everyone.
I am a newbie in front-end development. I recently learned to make a very ugly website, which is mainly used to download Weibo videos, Miaopai videos, etc.

The function I want to achieve is: on all pages of this website for downloading Weibo videos and Miaopai videos, if accessed from PC, the menu bar on the left will be displayed, which is col-md-3. For Android, Access from mobile terminals such as iPhone does not display the col-md-3 menu bar on the left, but only displays the col-md-9 part on the right.

I have basically implemented this function now, using the window.onload function. By default, col-md-9 is set to display:none. In the onload function, if it is determined to be a request from the PC side, col-md -3 is displayed, which causes the page to always be rendered first when accessed on the PC, and then the screen flashes before the col-md-3 menu appears.

I would like to ask all seniors, is there any way to achieve this function of mine under one URL (without distinguishing between mobile and PC) without the current screen flickering result?
I have tried all the methods on the Internet, but basically they did not solve my problem.
thank you all!

Answer 1

With bootstrap, you don’t have to write these manually

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

Written like this, if you feel like adjusting the size, press xs -> sm -> md to adjust it upward

Answer 2

Several methods

1. Write this part of onload to the top of the page.

2. Make this judgment on the server

3. Use media queries to write styles based on the screen resolution.