Question

我正在建立我的网站，我遇到了一个我无法弄清楚如何修复的问题！这让我很生气！

我有一个从页面左侧动画的菜单，固定宽度为100％，高度为100％。

它在我的笔记本电脑上工作正常，但当我在iPhone上查看时，菜单似乎在菜单激活时“缩小”。

如果有人能帮助我，我会非常感激。

CSS

nav {
width:100%;
right:100%;
background:#111725;
overflow-x:scroll;
z-index:5;
height:100%;

}

JS

$("#menuToggle").click(function(){
$("#navToggle").toggleClass('active');
$("main,header,.twitterToggle,.searchToggle").toggleClass('pushLeft');
$("nav").toggleClass('navLeft');
$("nav ul li").toggleClass('fadeUp');

}）;

HTML

<div id="menuToggle"><a id="navToggle"><span></span></a>MENU</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="http://danieljosephdesigns.co.uk/#services">Services</a></li>
<li><a href="http://danieljosephdesigns.co.uk/#portfolio">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
<li>
<a href="https://twitter.com/danjodesigns" target="_blank" class="twitter"></a>
  <a href="https://uk.linkedin.com/in/danieljosephdesigns" target="_blank" class="linkedIn"></a>
</li>

Answer 1

在点击功能上点击ogm.properties上的.is-locked课程。那么，你的jquery代码就是。

body

并添加以下CSS

$("#menuToggle").click(function(){
    $('body').toggleClass('is-locked');
    $("#navToggle").toggleClass('active');
    $("main,header,.twitterToggle,.searchToggle").toggleClass('pushLeft');
    $("nav").toggleClass('navLeft');
    $("nav ul li").toggleClass('fadeUp');
});

同时从.is-locked { overflow-x: hidden; }删除overlow-x:scroll。

缩小移动设备上的问题

1 个答案: