我設計並編碼了一個網站，但是當我放大瀏覽器時，它調整了大小

我在這個網站上非常努力工作，但我遇到了一個煩惱，我似乎無法弄清楚！我使用的是Mozilla Firefox，而不像其他網頁，當我縮放一切移動的地方！通常情況下，只有當你調整大小，但出於某種原因它正在做變焦也！我怎樣才能解決這個問題？這裏是代碼吼:)謝謝！附：我的縮放比例是90％，如果有一種方法可以在用戶打開頁面時自動設置瀏覽器的縮放比例，請讓我知道！我設計並編碼了一個網站，但是當我放大瀏覽器時，它調整了大小

*{margin:0; padding:0;} 
.container{ 
    width:100%; 
    height:100%; 
    background-image:url(backgrounds/background4.jpg); 
    background-size: cover; 
    overflow:hidden; 
} 
body{ 
    width:100%; 
} 
.mainHeader{ 
    width:100%; 
    height:100px; 
    background-color:rgba(0,0,0,0.6); 
    /*background-color:#182418;*/ 
    /*opacity:0.7;*/ 
} 
.mainHeader nav ul{ 
    margin-right:70px; 
    float:right; 
} 
.mainHeader nav ul li{ 
    display:inline-block; 
    margin-top:30px; 
    margin-right:20px; 
} 
.mainHeader nav ul li a{ 
    text-decoration:none; 
    font-family:Arial; 
    font-size:25px; 
    color:#ACACAC; 
    margin-right:30px; 
} 
.mainHeader nav ul li a.active{ 
    color:white; 
} 
.mainHeader nav ul li a:hover{ 
    color:white; 
} 
.mainHeader img{ 
    margin-top:-25px; 
} 
.mainArea .panel{ 
    margin-left:25%; 
    margin-top:2%; 
    width:50%; 
    height:620px; 
    background-color:rgba(0,0,0,0.6); 
} 
.mainArea .panel h1{ 
    color:white; 
    font-family:Arial; 
    padding:50px; 
    padding-left:60px; 
    text-align:center; 
} 
.mainArea .panel p{ 
    color:white; 
    font-family:Arial; 
    padding:30px 50px 50px 50px; 
    text-align:center; 
    font-size:25px; 
} 
.mainArea .panel form{ 
    margin-right:33%; 
    position:relative; 
    top:-5%; 
    float:right; 
} 
.mainArea .panel form .name, .email{ 
    width:300px; 
    height:40px; 
    border-radius:10px; 
    margin-bottom:40px; 
    background:rgba(0, 0, 0, 0.55); 
    border:none; 
    padding-left:20px; 
    font-family:Arial; 
    font-size:20px; 
    color:gray; 
} 
.mainArea .panel form .body{ 
    resize:none; 
    width:300px; 
    height:200px; 
    border-radius:10px; 
    margin-bottom:40px; 
    background:rgba(0, 0, 0, 0.55); 
    border:none; 
    padding-left:20px; 
    font-family:Arial; 
    font-size:20px; 
    color:gray; 
    padding-top:20px; 
    padding-right:30px; 
} 
.mainArea .panel form .submit{ 
    width:90px; 
    height:43px; 
    background:rgba(0, 0, 0, 0.55); 
    border:none; 
    font-family:Arial; 
    font-size:20px; 
    color:gray; 
    padding-top:-3px; 
    border-radius:10px; 
    margin-top:-5px; 
    margin-left:100px; 
} 
.mainArea .panel form .submit:hover{ 
    cursor:pointer; 
}

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>About</title> 
    <meta name="viewport" content="width=device-width, initial scale=1"> 
    <link rel="stylesheet" href="contact.css"> 
    <script type="text/javascript" src="jquery/jquery.js"></script> 
    <script type="text/javascript" src="jquery/jqueryui.js"></script> 
    <script type="text/javascript" src="config.js"></script> 
    <script type="text/javascript" src="scripts/script.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="mainHeader"> 
      <nav> 
       <ul> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="about.html">About</a></li> 
        <li><a class="active" href="#">Contact</a></li> 
       </ul> 
      </nav> 
      <img class="logo" src="logo.png"> 
     </div> 
     <div class="mainArea"> 
     <div class="panel"> 
      <h1>Welcome to our contact page!</h1> 
      <form action="php/mail.php" method="POST"> 
      <input type="text" value="Name" name="name" class="name"><br/> 
      <input type="text" value="Email" name="email" class="email"><br/> 
      <textarea name="message" class="body" rows="4" cols="50">What would you like to ask?</textarea><br/> 
      <input type="submit" value="Send!" class="submit"> 
      </form> 
     </div> 
     </div> 
    </div> 
</body> 
</html>

這裏是名爲background4.jpg背景此外，如果您嘗試運行在這個網站它會被搞砸了，因爲這樣的堆棧溢出的是佈局的一小段代碼片段，並因爲它需要背景圖像。因此，複製到文本文件最好。

來源

2015-04-04 Armyguy556

我不確定我完全理解，但請查看http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css -declaration/ – mikeLspohn 2015-04-04 19:20:38

如果SO上的代碼片段功能無法正確顯示您的問題，請不要使用它。編輯。謝謝。 – Sparky 2015-04-04 20:28:29

，如果你的元素，會分散而放大或重新調整您的瀏覽器窗口使用min-width和min-height的容器，這將使他們留在正確的方式，你喜歡他們
嘗試加入這一行：

.mainArea .panel { 
min-width: 790px; 
}

來源

2015-04-04 19:38:03 Amine

不幸的是，瀏覽器沒有一種通用的方法來縮放所有東西。至少不是沒有大量的腳本。

在我看來，設計一個網站和迫使瀏覽器達到90％也很奇怪。

縮放不是人們做了很多事情（在桌面上）。爲什麼不以100％設計一個頁面？

來源

2015-04-04 19:32:27 Darius

說實話，我不知道我在90％設計它！:(但是，無論如何感謝 – Armyguy556 2015-04-04 19:34:36

我設計並編碼了一個網站，但是當我放大瀏覽器時，它調整了大小

回答

相關問題