主菜單不適用於iOs

Question

我的網站http://basement-recordings.com/構建於wordpress（4.3.2）上的免費羽毛筆主題上。

我對chrome和safari上的所有iphones都有問題：主菜單似乎在我第一次單擊「漢堡包」時正常工作，但第二次單擊它時，一切都完全錯誤。

任何人都可以請幫我解決這個問題嗎？我嘗試了一切，但似乎並不奏效。

Answer 1

我解決了它。

出於某種原因，容器的100％寬度僅在我第一次單擊菜單時才起作用。

將100％改爲100vw似乎解決了這個問題。

Answer 2

你有一個浮動li標籤這裏

.main-navigation li { 
    position: relative; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
    text-align: center; 
    height: 150px; 
    width: 150px; 
    line-height: 150px; 
    -webkit-border-radius: 75px; 
    -moz-border-radius: 75px; 
    border-radius: 75px; 
    margin-left: 1%; 
    float: left; 

} 所以在你的媒體查詢，你必須使用從這裏清除它float:none

@media only screen and (max-device-width: 349px) and (max-width: 349px) and (min-device-width: 100px) and (orientation: portrait) 
.main-navigation li { 
height: 29vw; 
width: 29vw; 
line-height: 29vw; 
-webkit-border-radius: 14.5vw; 
-moz-border-radius: 14.5vw; 
border-radius: 14.5vw; 
margin-left: 2.2vw; 
padding: 0; 
margin-bottom: 2.2vw; 
display: block; 
float: none; 
} 

並確保其他媒體quires具有相同的修復程序，現在我有這個結果。