Wie steuert js den Anzeigestil eines Steuerelements, indem es bestimmt, ob die Zugriffsanforderung von einem mobilen Gerät kommt?

Question

Hallo zusammen.
Ich bin ein Neuling in der Front-End-Entwicklung und habe kürzlich gelernt, eine sehr hässliche Website zu erstellen, die hauptsächlich zum Herunterladen von Weibo-Videos, Miaopai-Videos usw. verwendet wird.

Die Funktion, die ich erreichen möchte, ist: Auf allen Seiten dieser Website zum Herunterladen von Weibo-Videos und Miaopai-Videos wird beim Zugriff vom PC die Menüleiste links angezeigt, die col-md-3 für Android und iPhone ist usw. Der mobile Zugriff zeigt nicht die Menüleiste col-md-3 auf der linken Seite an, sondern nur den Teil col-md-9 auf der rechten Seite.

Ich habe diese Funktion jetzt im Grunde mit der Funktion window.onload implementiert. Standardmäßig ist col-md-9 auf display:none eingestellt, wenn festgestellt wird, dass es sich um eine PC-seitige Anforderung handelt. md-3 ist eingestellt. Dies führt dazu, dass die Seite beim Zugriff auf dem PC zuerst gerendert wird, dann blinkt der Bildschirm und dann erscheint das Menü col-md-3. Entschuldigung, Senioren, gibt es eine Möglichkeit, diese meine Funktion unter einer URL zu erreichen (ohne zwischen Mobilgerät und PC zu unterscheiden), ohne dass der aktuelle Bildschirm flackert?

Ich habe alle Online-Methoden ausprobiert, aber im Grunde haben sie mein Problem nicht gelöst.

Vielen Dank an alle!

Answer 1

用了 bootstrap 就不用手动写这些了

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

这么写，觉得大小调整的话按 xs -> sm -> md 往上调

Answer 2

几个方法

1. 把这部分的onload写到页面顶部。

2. 在服务器做这个判断

3. 使用媒体查询，根据屏幕分辨率来写样式。