js css slidein菜单压缩内容而不是抛开

Question

对于网页的移动版本，我需要隐藏div并仅在单击时使其滑出。然后，应将div推到旁边。但是，我在Safari移动版上看到的是滑动的div出现在屏幕的左侧（小文本），而当前显示的div被部分覆盖并挤压在右侧。两者都占大众的50％。

当我用两根手指操纵移动屏幕时，先展开页面，然后再次将其缩小-然后重新加载页面，它看起来应该是这样，将右侧的div进一步推向右侧并显示其自身的内容大小合适。

如果某个向导可以提示我要挖掘/修改代码的地方，那就太好了。

css：

  /* CSS Document */
.menu {
    overflow-x:hidden;
    position:relative;
    left:0;
    }

.menu-opens {
    -webkit-transition:left:70%;
    left:70%;
    }   

.menu-opens .menu-side {left:0px;}  

.menu-side,
.menu {
    -webkit-transition: left 0.3s ease; /*transition does not work*/
    -moz-transition: left 0.3s ease;
    transition: left 0.3s ease;

}

.menu-side {
    background-color:#00366d;
    border-right: 1px solid #ffb600;
    color:rgb(255,255,255);
    position:fixed;
    top:0;
    left:-50%;
    width:50%;
    height:100%;
    padding:10px;
    }


The js:

(function() {
    var body = $('body');
    $('.menu-toggle').on('click', function() {
        body.toggleClass('menu-opens');
        return false;
        });
    })();