そう...
：
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div>
<div>
<div></div>
<div></div>
</div>
</div>
</body>
2つの最後のdivがあなたのメニューやコンテンツです。
その後、CSSは：
*
{
margin : 0;
padding : 0;
}
html, body
{
width : 100%;
height : 100%;
}
body > div
{
width : 100%;
max-width : 100%;
height : 100%;
overflow : hidden;
}
body > div > div
{
width : 200%;
height : 100%;
-webkit-transform : translate(-40%);
-webkit-transition : -webkit-transform 1s linear;
}
body > div > div.hover
{
-webkit-transform : translate(0%);
}
body > div > div > div
{
float : left;
height : 100%;
}
body > div > div > div:first-child
{
width : 40%;
background : red;
}
body > div > div > div:first-child+div
{
width : 50%;
background : blue;
}
それは（それは簡単なようでないかもしれないとしても）非常に簡単です：
100％で、最初のdivとオーバーフロー：隠されました。スクロールを防止します。これを行うには本体 を使用する必要がありますが、iOSの奇妙な点がこれを防止します。
2番目のdivは2つの浮動小数点を保持する大きなコンテナです
div。この大きな容器は翻訳されています。
3番目のdivはメニューとコンテンツです。
オンザフライで％を計算しました。それらを調整する必要があります。
次に、それをテストするためにビットあなたのjQuery：
<script>
$(document).on('touchstart', function()
{
$("body > div > div").addClass("hover");
});
</script>
あなたはそれが唯一のデモの目的のためだ、touchstartイベントを使用しないでください。
iOS 5.1とAndroid 2.3でテスト済みです。
必要な動作に応じて、さまざまな方法があります。メニューを開いたときに、水平スクロールやビューポートを100％にしますか？ – mddw
偉大な質問 - 申し訳ありませんが、私は水平スクロールバーが欲しいと言わないことを忘れていました。私はビューポートを100％のままにし、メインのコンテンツを再び見て、再び隠れるようにメニューを切り替えることを主な方法としたいと思います。 – LearnWebCode