js는 액세스 요청이 모바일 장치에서 오는지 여부를 결정하여 컨트롤의 표시 스타일을 어떻게 제어합니까?

Question

안녕하세요 여러분.
저는 프론트엔드 개발의 초보자입니다. 최근 웨이보 동영상, Miaopai 동영상 등을 다운로드하는 데 사용되는 아주 추악한 웹사이트를 만드는 법을 배웠습니다.

제가 구현하고 싶은 기능은 이 웹사이트의 모든 페이지에서 Weibo 동영상 및 Miaopai 동영상을 다운로드할 수 있는 경우 PC에서 액세스하면 왼쪽 메뉴 표시줄이 표시되며 Android, iPhone의 경우 col-md-3입니다. 등이 있습니다. 모바일 접속에서는 왼쪽에 col-md-3 메뉴바가 표시되지 않고, 오른쪽에 col-md-9 부분만 표시됩니다.

이제 기본적으로 window.onload 함수를 사용하여 이 기능을 구현했습니다. 기본적으로 col-md-9는 onload 함수에서 PC측 요청으로 판단되면 col- md-3이 설정되었습니다. 이렇게 하면 PC에서 액세스할 때 페이지가 먼저 렌더링된 다음 col-md-3 메뉴가 나타나기 전에 화면이 깜박입니다. 실례합니다 선배님들, 현재 화면 깜빡임 현상 없이 하나의 URL로(모바일과 PC 구분 없이) 이 기능을 구현할 수 있는 방법이 없을까요?

온라인 방법을 모두 시도했지만 기본적으로 문제가 해결되지 않았습니다.

모두들 감사합니다!

Answer 1

부트스트랩을 사용하면 수동으로 작성할 필요가 없습니다

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

이렇게 작성했는데, 사이즈 조절을 원하시면 xs -> sm -> md 를 눌러 위쪽으로 조절해주세요

Answer 2

여러 가지 방법

1. onload의 이 부분을 페이지 상단에 작성하세요.

2. 이 판단은 서버에서 하세요

3. 미디어 쿼리를 사용하여 화면 해상도에 따라 스타일을 작성하세요.