响应式菜单 (iphone 5)答案

【问题标题】：Responsive menu (iphone 5)响应式菜单 (iphone 5)
【发布时间】：2018-03-23 04:23:11
【问题描述】：

我的客户有一部 iphone 5，但在网站 http://www.arbores.be 的响应式菜单中滚动时出现问题（使用 safari）

我在重现问题时遇到了问题，有人发现问题了吗？如何解决滚动问题？

我的客户向我展示了该问题的视频 screencapture phone

这是响应式菜单的代码

.main-navigation {
            position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    height: auto;
    overflow-y: auto;
    min-height: 0;
            z-index: 9999;
    padding-left: 0;
        padding-right: 0;
    .menu-toggle {
        float: right;
    }
    .menu-main_menu-container {
        background: $main__color;
    }
    ul {
        width: 100%;
      height: 93vh;
      background: $main__color;
                top: 0;
                left: 0;
                right: auto;
                bottom: auto;
                -webkit-transform: none;
        -moz-transform: none;
        transform: none;
                z-index: 9998;
      overflow-y: scroll;
       -webkit-overflow-scrolling:touch;
        li {
            width: 100%;
          border-bottom: 1px solid darken($main__color, 10%);
          margin: 0;
          &:last-child {
            padding-bottom: 20px;
            border-bottom: 0;
          }
            a {
                @include font-size(16px);
              width: 100%;
                                color: #fff;
              padding: 5px 0 5px 24px;
                &:after {
                  display: none;
                }
            }
        }
    }
  }

【问题讨论】：

由于我们不知道您的代码是什么样的，我们只能猜测问题所在。但实际上，那只是在没有目标的情况下将飞镖扔到墙上。
真正的问题是什么？以什么方式滚动？
我已经添加了菜单的代码和我的客户设置的屏幕截图。

标签： css responsive-design sass

【解决方案1】：

首先你设置元标记：

<meta name="viewport" content="width=device-width, initial-scale = 1.0, 
maximum-scale=1.0, user-scalable=no" />

然后检查您提供的所有填充。还要检查你设置的宽度任何宽度：100%

没有任何效果，然后尝试使用溢出：隐藏

body, html { 溢出-x:hidden; }

【讨论】：