在手機和iPad上使用引導導航欄

Question

我一直在嘗試讓我的網站在移動設備和iPhone 5上正常工作（在iPhone 6上正常工作）。 它可以在模擬器上運行，但不能在服務器上運行。 我的右邊距為20px。

它可以在網上正常運行 ： anandandakhil.me

我在這里在stackoverflow上查找了一些線程，但是它們沒有起作用。

其中之一是@media(max-width:768px)

我嘗試將其附加到類navbar，navbar-collapse

這是代碼

的index.html

切換導航

家

關於

投資組合

保持聯系

style.css文件

 #navbar-header.navbar-default { font-size: 16px; background-color: rgba(255, 255, 255, 1); border-bottom-width: 1px; } #navbar-header.navbar-default .navbar-nav>li>a { color: rgba(119, 119, 119, 1); background-color: rgba(255, 255, 255, 1); } #navbar-header.navbar-default .navbar-nav>li>a:hover, #navbar-header.navbar-default .navbar-nav>li>a:focus { color: #f28500; background-color: rgba(255, 255, 255, 1); } #navbar-header.navbar-default .navbar-nav>.active>a, #navbar-header.navbar-default .navbar-nav>.active>a:hover, #navbar-header.navbar-default .navbar-nav>.active>a:focus { color: #f28500; background-color: #fff; } @media(max-width:768px) { #navbar-header.navbar-default .navbar-toggle { border-color: #f28500; } #navbar-header.navbar-default .navbar-toggle:hover, #navbar-header.navbar-default .navbar-toggle:focus { background-color: #ffffff; } #navbar-header.navbar-default .navbar-toggle .icon-bar { background-color: #f28500; } #navbar-header.navbar-default .navbar-toggle:hover .icon-bar, #navbar-header.navbar-default .navbar-toggle:focus .icon-bar { background-color: #f28500; } } 

Answer 1

我也在使用Bootstrap。

據我所知，手機的屏幕分辨率與CSS分辨率不同。 例如，iPhone 5的屏幕分辨率為640x1136，而CSS分辨率為320x568。