私は経験豊富な Web デザイナーであり、この厄介な問題に遭遇したようです。基本的な要約は、クライアントのために作成している私の Web サイトが完成し、効率的に実行され、コンピューター上で希望どおりに表示されることです。
ただし、他のコンピューターで表示すると、ナビゲーション バーが表示されなくなります。インスペクト要素を介してページに「ズームイン」効果が適用されていることを確認でき、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;
}
ID 名「controls」の下にある、ナビゲーション バーの CSS パラメーターを次に示します。
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>
このウェブサイトを使用するのはこれが初めてなので、プロトコルを見逃したり、間違って入力したりした場合は、事前にお詫び申し上げます。メイン ページの 2 つのスクリーンショットを提供しました。本来の外観と他のコンピューターでの表示方法の両方です。
ナビゲーション バーが下部にある正しい形式。 正しいフォーマット
下にスクロールしたときにのみナビゲーション バーが表示され、位置がずれている (他のページのすべてのテキストも位置がずれている) 不適切な形式。 間違った形式