我的网站在我的计算机上看起来不错，但是在其他计算机上放大了文字

Question

我是一位经验丰富的网页设计师，似乎已经解决了这个麻烦的问题。 基本清单是我正在为客户制作的网站已完成并且可以高效运行，并能按照我希望的方式在计算机上显示。

但是，当我通过其他计算机查看它时，导航栏消失了。 我能够通过检阅元素发现该页面应用了“放大”效果，并且发现在75％的位置出现了文本和导航栏，其排列方式本来是应该的。
但是，当以100％的比例查看时，我的所有文本和导航栏似乎都完全消失或以更加混乱的方式出现。 当缩放到75％时，它会放置在正确的布局中，但我不知道缩放功能是否会真正解决我的问题。

，我不知道如何解决这个问题，希望有人能帮助我。

我的网站支持垂直并行滚动（通过Jquery实现）。 下面，我列出了整个div屏幕的CSS以及第一个屏幕/着陆页的CSS（所有其他屏幕都具有相同的CSS）。

div#slideTrain {
    position: fixed;
    top: 0px;
    left: 0px;
}
div#screen1 {
    background-image:url("photos/landingpage3.jpg");
        no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0px;
    z-index: 10;
}

这是导航栏的CSS参数，其ID名称为“ controls”

div#controls {
    position: relative;
    z-index: 20;
    margin-top: 860px;
    margin-left: 630px;
    color: white;
    font-family: Helvetica;
    overflow: hidden;
}
span {
    cursor: pointer;
    padding: 30px;
    font-size: 14px;
}

控件的HTML部分如下：

<div id="controls">
    <span id="button1">home</span>     
    <span id="button2">our team</span>     
    <span id="button3">menu</span>      
    <span id="button4">contact</span>
</div>

这是我第一次使用此网站，所以如果我错过任何协议或输入错误的内容，我深表歉意。 我提供了该主页的两个屏幕截图，分别是它的外观以及它在其他计算机上的显示方式。

正确的格式，导航栏位于底部。 正确格式

格式不正确，其中导航栏仅在向下滚动时可见，但仍保持未对齐（其他页面上的所有文本也未对齐）。 格式错误