Css iPhone中的响应问题

我正试图创建自己的网站，但我在iphone上遇到了很多问题

看看这些屏幕：

我有我的网站和菜单的介绍

这在所有Windows浏览器和Android中都能完美运行。这不会发生在Safari或iphone的所有浏览器上：

文本不会出现，菜单甚至不会完全打开

我的css：

//导航栏：

.at-front-no-feature.menu-default .navbar{
        position: fixed;
    }
    .menu-default .navbar{
        position: static;
        z-index: 9;
        left: 0;
        right: 0;
    }

单击按钮时的CSS：

.menu-default #navbar .navbar-collapse {
    height: auto;
    min-height: 100%;
    position: fixed;
    max-height: 70vh;
    right: 0;
    left: 0;
    z-index: 999;
}

链接的CSS：

    float: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
}

我的文本中心的CSS（嗨，我的名字是peter）

我怎样才能解决这个问题？我尝试过显示：内联块；垂直对齐：中间对齐；它确实显示了iphone上的文本，但它不允许我调整按钮的大小。。。或应用宽度或高度

编辑：我一直在做测试，似乎图像使菜单变暗，因此不可见。尽管使用了固定或绝对位置，但看不到它。虽然我使用z索引，但它不起作用。。。我怎样才能修好它

See this:

$（文档）.ready（函数（）{
$（'.menu btn'）。单击（函数（事件）{
$（'.navbar demo'）.toggleClass（'open-nav'）；
});
});
正文{
保证金：0；
字体系列：Roboto；
}
.英雄形象.关于我{
宽度：100%；
位置：绝对位置；
最高：50%；
左：50%；
右：0；
转换：翻译（-50%，-50%）；
文本对齐：居中；
z指数：99；
}
.英雄形象.关于我的标签{
字号：26px；
颜色：#fff；
显示：块；
}
.英雄形象：之后{
背景色：黑色；
内容：''；
位置：绝对位置；
宽度：100%；
左：0；
右：0；
身高：100%；
不透明度：0.3；
}
.英雄形象{
背景尺寸：封面；
位置：相对位置；
宽度：100%；
高度：100vh；
背景颜色：浅灰色；
背景图像：url（'https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXWXMJA3FDB8MHWAG90BY1WYWDLFHX8FGVUFDB8FHW%3D&auto=format&fit=crop&w=1350&q=80’；
显示：表格；
背景位置：中心；
}
.英雄形象.关于我{
显示：内联块；
文字装饰：无；
颜色：#fff；
填充：10px 20px；
边框：1px纯白；
利润率：20px；
}
.导航栏演示{
显示：表格；
宽度：100%；
位置：固定；
z指数：99；
}
.导航条演示.导航条ul li{
显示：块；
}
.导航条演示.导航条ul{
填充：0；
显示：表格；
文本对齐：居中；
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
保证金：0；
填充：0；
}
.导航条演示.导航条ul li a{
字号：18px；
显示：内联块；
文本对齐：居中；
文字装饰：无；
颜色：#000；
填充：18px；
文本转换：大写；
}
.导航栏{
文本对齐：居中；
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.navbar演示按钮.menu-btn{
显示：无；
}
@仅介质屏幕和（最大宽度：767px）{
.navbar演示按钮.menu-btn{
位置：绝对位置；
排名：0；
右：0；
背景色：未设置；
边界：0；
字号：26px；
显示：块；
填充：23px；
颜色：#fff；
大纲：无；
} 
.导航栏演示{
身高：100%；
z指数：999；
}
.导航栏演示.导航栏{
左：-950px；
背景色：#000000d9；
过渡：1s；
身高：100%；
}
.navbar-demo.open-nav.nav-bar{
左：0；
宽度：100%；
过渡：左0.5s；
身高：100%；
}
.导航条演示.导航条ul li a{
显示：块；
颜色：#fff；
}
.navbar-demo.open-nav按钮.menu-btn i:之前{
内容：'\f00d'；
}
}





嗨，我叫约翰·多伊

See this: