在移动设备上缩小问题答案

【问题标题】：Zoom out issue on mobile devices在移动设备上缩小问题
【发布时间】：2016-03-15 22:44:17
【问题描述】：

我正在构建我的网站，但我遇到了一个我不知道如何解决的问题！快把我逼疯了！

我有一个从页面左侧进入动画的菜单，并固定为宽度 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>

【问题讨论】：

当人们在谷歌上搜索这个问题时，我们倾向于将人们链接到几个月后可能不存在的完整网站，而不是如果人们尝试仅隔离导致问题的代码部分，然后发布那些作为一个完整的问题。（作为奖励，遵循这个过程实际上有时可以帮助人们发现问题）

标签： css responsive-design

【解决方案1】：

在点击功能上切换.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。

【讨论】：