안녕하세요. Node.js, expressJS, jquery v2.1.3 및 twitter-bootstrap v3.3.2를 사용하는 모바일 웹 응용 프로그램에서 작업하고 있습니다. 어젯밤에 내가 사용하고있는 navbar가 과거에 사용했던 다른 모든 bootstrapped navbars보다 작게 보였던 응용 프로그램을 테스트 할 때마다 (텍스트가 작아 졌을 때 텍스트가 작아 졌을 때 그 높이가 작아 졌음을 알았습니다.), 붕괴되어 버린다. 나는 분명히이 navbar 이변이 어디에서 왔는지를 알아보기 위해 시도 할 수있는 모든 것을 조사하기 시작했습니다. 상황에 대한 더 많은 통찰력. 코너 또는 브라우저 창을 선택하고 끌어서 크기를 조정하면 탐색 표시 줄이 제대로 작동합니다. 모바일 장치 모드에서 크롬으로 검사하거나 모바일 장치의 브라우저를 사용하여 제대로 작동하지 않는 응용 프로그램에 액세스 할 수 있습니다. 일단 내 navbar가 난처한 새로운 비어있는 웹 응용 프로그램을 만들고 navbar 및 일부 필러 텍스트를 내 탐색 막대 상속 수있는 모든 코드를 제거 할 수 있도록하기로 결정했습니다. 이것도 실패했습니다. 온라인으로 가서 jquery와 bootstrap을 새로 다운로드하여 프로젝트에 넣었습니다. 그런 다음 bootply.com에서 기본 탐색 바에 대한 상용구 코드를 가져 와서 추가했습니다. 이는 새로운 설치 예제에서도 작동하지 않았습니다. 응용 프로그램이 모바일 장치에서 실행되거나 크롬에서 모바일 장치로 검사 될 때 있어야하는 것보다 작아야하는 nav-bar 크기와 동일한 문제가 있습니다. 브라우저 크기를 간단히 조정하면 크기가 작아집니다. 모바일을 모방. 내가 포함했다 아래 다음부트 스트랩 기본 navbar는 새로 설치하는 경우에도 기본 크기보다 작아야합니다.
[. Heroku가에서 호스팅되는 응용 프로그램에 링크] [2]
관련 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="/jQuery/dist/jquery.js"> </script> <script type="text/javascript" src="/bootstrap-3.3.2-dist/js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/bootstrap.css"/> </head> <body><!--Body starts here--> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container" style="margin-top:50px"> <div class="text-center"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div><!-- /.container -->
편집 1 더 통찰력있는 정보는 Hager Aly에게 감사드립니다. [여기에 imgur 앨범 링크가 있습니다.] [3] 여기에는 두 개의 스크린 샷이 포함되어 있습니다. 하나는 응용 프로그램의 navbar를 검사 할 때이고 다른 하나는 getbootstrap.com에서 기본 navbar를 검사 할 때입니다. 휴대 기기에서 내 애플리케이션에 액세스하면 첫 번째 스크린 샷과 동일하게 나타납니다. 과거에는 항상 두 번째처럼 보였습니다.
더 많은 정보가 있으면 알려 주시기 바랍니다. 사전에 시간 내 주셔서 감사합니다. 감사합니다
--Fredk
부트 스트랩 공식 사이트와 동일한 나를 좋아 보인다, 내가, 내가이 바보 수 있습니다 알고있는 방법으로 파이어 폭스를 사용하고 당신은 누르십시오 "Ctrl + 0" –
을 기본 윈도우 줌을 다시 시도 할 수 있습니다 모바일 장치에서 Firefox 브라우저를 사용하고 있습니까?내 전화에서 파이어 폭스 브라우저를 사용하여 내 영웅 응용 프로그램에 액세스하려고 할 때 나는 여전히 작은 탐색 바를 받고 있습니다. – tilted
스크린 샷을 첨부 할 수 있습니까? 정상적으로 작동합니다. Windows phone –