js は、アクセス要求がモバイル デバイスからのものであるかどうかを判断して、コントロールの表示スタイルをどのように制御しますか?

Question

＃＃＃こんにちは、みんな。

私はフロントエンド開発の初心者です。最近、主に Weibo 動画や Miaopai 動画などをダウンロードするために使用される、非常に見苦しい Web サイトの作成を学びました。

私が実現したい機能は: Weibo 動画と Miaopai 動画をダウンロードするためのこの Web サイトのすべてのページで、PC からアクセスすると、左側のメニュー バー (col-md-3) が表示されます。 , iPhoneなどのモバイル端末からアクセスすると、左側のcol-md-3のメニューバーは表示されず、右側のcol-md-9の部分のみが表示されます。

今回は基本的にwindow.onload関数を使ってこの機能を実装しました デフォルトではcol-md-9はdisplay:noneに設定されています onload関数ではPC側からのリクエストと判断した場合、col-md -3 が表示されます。

これにより、PC でアクセスするとページが常に最初にレンダリングされ、col-md-3 メニュー が表示される前に画面が点滅します。

先輩の皆さんに聞きたいのですが、現在の画面がちらつくことなく、1つのURLで（モバイルとPCを区別せずに）私のこの機能を実現する方法はありますか？

インターネット上のすべての方法を試しましたが、基本的に問題は解決しませんでした。 ＃＃＃皆さん、ありがとうございました！

Answer 1

ブートストラップを使用すると、これらを手動で記述する必要がありません

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

このように書いていますが、サイズを調整したい場合は、xs -> sm -> mdを押して上方向に調整してください。

Answer 2

いくつかの方法

1. onload のこの部分をページの先頭に書き込みます。

2. この判断はサーバー上で行います

3. メディアクエリを使用して、画面解像度に基づいてスタイルを記述します。