크기가 조정 된 Google 크롬 창에서와 같이 내 웹 사이트가 모바일에서도 똑같이 보이게하려면 어떻게해야합니까?

Question

MediaWiki에서 HTML 웹 사이트를 실행해야했습니다. 웹 사이트는 http://2016.igem.org/Team:UrbanTundra_Edmonton입니다. 처음에는 많은 버그가있었습니다. MediaWiki는 기본적으로 서버에 .HTML 파일을 두는 대신 모든 작업을 수행 할 수있는 텍스트 편집기로 제한합니다. 그러나 대부분의 버그를 해결할 수있었습니다. 유일하고, 아마도 가장 힘든 버그는 웹 사이트의 반응입니다.

예를 들어 Google 크롬 창에서 웹 사이트의 크기를 조정하면 웹 사이트가 올바르게 작동합니다. 그러나 휴대 전화에서 동일한 웹 사이트를 열면 nav-toggle이 화면에서 벗어나 일반 레이아웃이 분리됩니다. 다른 매체를 통해 웹 사이트를 보는 것은 나의 미묘한 묘사에 비해 더 나은 이해를 줄 것입니다.

내가 도움을 청하기로 결정하기 전에 실제로 이것은 더 큰 문제였습니다. 나는 기본적으로 Chrome에서 'Inspect Element'를 사용하여 모든 패딩을 얻으려면 여백과 여백 값을 변경했습니다. 그리고 진정으로 크기가 조정 된 Chrome 창에서는 괜찮습니다.

그런 다음 Chrome의 모바일 에뮬레이터 (Dev Tools에 내장되어 있음)를 사용하고 시행 착오 방식을 사용하지 않으려 고 시도했습니다.

누군가 나를 도울 수 있는지 궁금 해서요. 적어도 크기를 조정 한 Chrome 창에서 볼 수있는 방법에 대한 팁을 휴대 전화에 표시 했나요?

Answer 1

답변을 찾았습니다. 실제로 단지 사용자 확장 성 매개 변수를 추가하고 더로 설정하지했다

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

: 내 메타 태그처럼 읽을! 따라서 다음과 같이 표시됩니다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;" /> 

이제 모든 것이 의도 한대로 작동합니다.