Question

我使用节点js和html创建了一个网站。当我在手机上查看网站时，我必须放大才能看到它。我可以在我的css中放置任何代码，我可以修改网站内容以适应窗口/浏览器的大小吗？

  /*Styles the Webpage*/

h1 {
    color:black;
    font-family: Georgia;
  line-height: 1.4;
  font-weight: normal;
    font-stretch: normal;
  font-variant: small-caps;
  font-size: 36px;
    text-align: center;
    padding: 35px;
}

label {
    position: relative;
  float: left;
    text-align: left;
    font-size: 18px;
    color: black;
}
input[type=submit] {
    width: 5em;  height: 1.5em;
      align: center;
}
input[type=number] {
    width: 8em;  height: 1.5em;
}
div {

      border: 1px solid black;
        box-sizing: border-box;
        padding: 25px;

    }
body {
    background-color:#c7c9c7    ;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 60px;
    text-decoration: none;
}

a:hover:not(.active) {
    background-color: #8a8d8f;
}

.active {
background-color:#002B7F    ;
}
img {
    position: fixed;
    width: 190px;
    height:50px;
    left: 40px;
  top: 40px;
}

Answer 1

您需要让您的网站快速响应。您可以使用CSS media queries并添加到头部：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 2

将此代码放入<head>标记：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

它将使每个设备显示元素的实际像素大小。

修复手机上的放大

2 个答案: