移动设备上的缩小问题

我正在构建我的网站，我遇到了一个问题，我无法弄清楚如何修复！这让我生气了！移动设备上的缩小问题

我有一个菜单，从页面的左侧进行动画处理，宽100％，高100％。

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

如果有人可以帮助我，我真的很感激它。

CSS

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

}

$("#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>

来源

2016-03-11 DannyBoy

与其将人连接到几个月后人们可能不存在的完整网站时，我们倾向于倾向于倾向于如果人们试图隔离导致问题的代码部分，并将其作为完整问题发布。（作为奖励，以下过程实际上可以帮助人们有时发现问题） – Katana314

切换.is-locked类上body上的点击功能。所以，你的jQuery代码会。

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

，并添加以下CSS

.is-locked { 
    overflow-x: hidden; 
}

而且从nav删除overlow-x:scroll。

来源

2016-03-13 08:53:05 Morven

移动设备上的缩小问题

回答

相关问题