我设计并编码了一个网站，但是当我放大浏览器时，它调整了大小

我在这个网站上非常努力工作，但我遇到了一个烦恼，我似乎无法弄清楚！我使用的是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

我设计并编码了一个网站，但是当我放大浏览器时，它调整了大小

回答

相关问题