代碼在手機上不起作用

Question

所以我創建了一個網站，沒什麼特別的，只是學習JavaScript的工作原理。

對桌面它的工作非常好。當我做我的JavaScript看起來像這樣

function menu(){ 
menuButton = document.getElementById('button_menu'); 
nav = document.getElementById('menu'); 
content = document.getElementById('content'); 

if (menuButton.classList != 'active'){ 
    //Then Move Content and Nav 
    menuButton.classList.add('active'); 

    content.classList.remove('moveContentBack'); 
    content.classList.add('moveContent'); 

    nav.classList.remove('moveNavBack'); 
    nav.classList.add('moveNav'); 
} 
else{ 
    menuButton.classList.remove('active'); 

    content.classList.remove('moveContent'); 
    content.classList.add('moveContentBack'); 

    nav.classList.remove('moveNav'); 
    nav.classList.add('moveNavBack'); 

} 
} 

在移動代碼工作這樣更好。

function menu(){ 
menuButton = document.getElementById('button_menu'); 
nav = document.getElementById('menu'); 
content = document.getElementById('content'); 

if (menuButton.classList != 'active'){ 
    //Then Move Content and Nav 
    menuButton.classList.add('active'); 

    content.style.webkitTransform = "translate3d(200px, 0px, 0)"; 
    nav.style.webkitTransform = "translate3d(0px, 0px, 0)"; 
} 
else{ 
    menuButton.classList.remove('active'); 

    content.style.webkitTransform = "translate3d(0px, 0px, 0)"; 
    nav.style.webkitTransform = "translate3d(-100px, 0px, 0)"; 
} 
} 

我真的很喜歡它是如何在桌面

出於某種原因，它根本不是那樣的工作。如果你想預覽我的網站，看看它是如何工作的（在手機和臺式機上），看看skarchmittest2.tumblr.com

我知道我可以使它通用，並使其簡單的過渡，但我添加了這些類讓它變得有彈性。

.active{ 
background: red !important; 
} 
.moveContent{ 
-webkit-animation: moveContentBounce .5s; 
animation: moveContentBounce .5s; 
/*-webkit-transform: translate3d(200px, 0px, 0) !important;*/ 
} 
.moveContentBack{ 
-webkit-animation: moveContentBackBounce .5s; 
animation: moveContentBackBounce .5s; 
/*-webkit-transform: translate3d(0px, 0px, 0) !important;*/ 
} 
.moveNav{ 
-webkit-animation: moveNav .5s; 
animation: moveNav .5s; 
/*-webkit-transform: translate3d(0px, 0px, 0) !important;*/ 
} 
.moveNavBack{ 
-webkit-animation: moveNavBack .5s; 
animation: moveNavBack .5s; 
/*-webkit-transform: translate3d(-100px, 0px, 0)!important;*/ 
} 

@-webkit-keyframes moveContentBounce{ 
0%{-webkit-transform: translate3d(0px, 0px, 0);} 
50%{-webkit-transform: translate3d(230px, 0px, 0);} 
100%{-webkit-transform: translate3d(200px, 0px, 0);} 
} 

@-webkit-keyframes moveContentBackBounce{ 
0%{-webkit-transform: translate3d(200px, 0px, 0);} 
20%{-webkit-transform: translate3d(210px, 0px, 0);} 
100%{-webkit-transform: translate3d(0px, 0px, 0);} 
} 

@-webkit-keyframes moveContent{ 
0%{-webkit-transform: translate3d(0px, 0px, 0);} 
/*50%{-webkit-transform: translate3d(100px, 0px, 0);}*/ 
100%{-webkit-transform: translate3d(200px, 0px, 0);} 
} 

@-webkit-keyframes moveContentBack{ 
0%{-webkit-transform: translate3d(200px, 0px, 0);} 
/*50%{-webkit-transform: translate3d(100px, 0px, 0);}*/ 
100%{-webkit-transform: translate3d(0px, 0px, 0);} 
} 

@-webkit-keyframes moveNav{ 
0%{-webkit-transform: translate3d(-100px, 0px, 0);} 
100%{-webkit-transform: translate3d(0px, 0px, 0);} 
} 
@-webkit-keyframes moveNavBack{ 
0%{-webkit-transform: translate3d(0px, 0px, 0);} 
100%{-webkit-transform: translate3d(-100px, 0px, 0);} 
} 

這些對象

#content{ 
    z-index: 100; 
    background: white; 
    position: absolute; 
    transition: 0.2s ease-out; 
    display: block; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
}  
nav#menu{ 
position: absolute; 
min-height: 100vh; 
width: 300px; 
background: gray; 
-webkit-transform: translate3d(-100px, 0px, 0); 
} 

的原始狀態有一些註釋掉的代碼，這就是我試圖使人人皆可工作，因爲它不會在桌面上。

基本上，我不知道爲什麼-webkit轉換CSS PROPERTY在iOS上不起作用，但使用JavaScript和.style.webkitTrasform =「」;確實。一旦我明白這一點，我會讓它與其他瀏覽器兼容。

Answer 1

不是100％確定，但正如您在http://caniuse.com/#search=webkit-transform上看到的那樣，iOS僅支持webkit轉換。從那裏引用：

部分支持是指缺少過濾器支持或來自 效果的錯誤結果。一個CSS濾鏡效果規範正在開發中， 將取代這種方法。

所以，也許你必須保持js解決方案一段時間。

Answer 2

在我的javascript，所有我需要做的就是添加

window.location="#scroll"; 
    window.location="#someotherObject"; 

這兩個對象是無形的（不透明度：0，和不可選），並在同一個地方絕對定位。奇蹟般有效。