Question

即使添加了<meta>标签，我的HTML表单arpitpkh.pythonanywhere.com在PC上也可以正常工作，但在手机上却没有响应（我正在使用iphone7）。

这是我的'home.html'的html代码

我的代码有什么问题？？我应该更改我的代码吗？

body {
  background-image: url("/static/grey.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  text-align: center;
  margin-top: 250px;
  font-size: 70px;
  color: coral;
}

.input2:hover {
  background-color: coral;
  color: white;
}

.input1 {
  position: absolute;
  top: 60%;
  left: 37%;
  width: 250px;
  height: 30px;
}

.input2 {
  position: absolute;
  top: 59.4%;
  left: 59%;
  width: 87px;
  height: 35px;
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 5px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Weather Forecast</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
  <script src="main.js"></script>
</head>

<body>
  <p>
    <form action='/weather' method="post">
      <h1>City Name:</h1><input class="input1" type="text" name="city_name"> <br/>
      <input class="input2" type="submit" name="form" value="Submit">
    </form>
  </p>
</body>

</html>

Answer 1

您正在使用绝对定位并以px为单位定义大小，该大小在所有屏幕尺寸上均保持不变，从而使设计无响应。

您需要使用响应单元，例如em和媒体查询。查看有关article的响应式设计原理以及快速tutorial的信息。

即使添加了meta标签，html表单也没有响应

1 个答案: