【发布时间】：2021-11-06 07:14:53
【问题描述】：
当我使用“检查元素”测试响应性时，它工作得非常好，但是当我真正将网站放到网上并用我的 iPhone 打开网页时，它就不起作用了。一行中只有 4 个图标，而应该是 2x2 图标。谁能帮我解决这个问题？
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
}
body{
font-family: 'Fjalla One', sans-serif;
background: #2C3E50; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-repeat: no-repeat;
}
.container{
margin: auto;
}
h1{
text-transform: uppercase;
font-size: 60px;
line-height: 47px;
letter-spacing: 2px;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
text-align: center;
line-height: 60px;
}
.title{
transform: rotate(-5deg);
margin: 0 auto;
display: block;
}
form {
width:500px;
margin:0 auto;
margin-bottom: 50px;
}
.search {
width: 300px;
height: 30px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
border-radius: 7px;
text-align: center;
color: white;
outline: none;
}
.btnsearch {
width: 50px;
height: 31px;
border-radius: 0px 7px 7px 0px;
position:relative;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
left: -10px;
}
.btnsearch:hover {
background-color:#fafafa;
color:#207cca;
}
.icon-div {
display: inline-block;
padding: 20px;
}
.icon{
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
display: table-cell;
vertical-align: middle;
color: white;
border-radius: 35px;
width: 180px;
height: 180px;
text-align: center;
margin-bottom: 20px;
/*background: #007991; /* fallback for old browsers */
/*background: -webkit-linear-gradient(to bottom, #78ffd6, #007991); /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
@media only screen and (max-width: 300px) {
td {
float: left;
margin-right:10px;
width: 45%;
}
td:nth-child(3) {
clear: left;
}
.icon{
width:100%!important;
height:100%!important;
margin-top: 50px;
}
}
.icon:hover, .icon:focus, .icon:active {
box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.icontext{
text-align: center;
color: white;
font-size: 30px;
}
table {
border-spacing: 60px;
border-collapse: separate;
}
.contactbtn{
margin-right: 15px;
color: white;
border: 2px solid black;
border-radius: 35px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
width: 100px;
height: 30px;
text-align: center;
justify-content: center;
margin-top: 50px;
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
background: #007991; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #78ffd6, #007991); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.contactbtn:hover, .contactbtn:focus, .contactbtn:active {
box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Knowledge base</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" charset="utf-8"></script>
</head>
<body>
<!--Title-->
<section class="container">
<h1>
<br />
<span class="title" >
<label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
<!--Zoekbalk-->
<form align="center">
<input type="text" placeholder="Zoek iets op..." class="search">
<input type="button" value="Zoek" class="btnsearch">
</form>
<!--Icoontjes-->
<div style="text-align: center;">
<div class="icon-div" style="display: inline-block;">
<a href="afspraken.html">
<img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/reminders_icon@2x.png" class="icon">
</a>
<span class="icontext">Afspraken</span>
</div>
<div class="icon-div">
<img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/fmf_icon@2x.png" class="icon">
<span class="icontext">Situaties</span>
</div>
<div class="icon-div">
<img src="controlcenter.png" class="icon">
<span class="icontext">Grenzen</span>
</div>
<div class="icon-div">
<img src="Multitaks.png" class="icon">
<span class="icontext">Categoriëen</span>
</div>
</div>
<div style="text-align: center;">
<input type="button" value="contact" class="contactbtn">
</div>
<!--Contact-->
</body>
</html>【问题讨论】：
-
我现在无法查看所有代码，但我注意到您的头脑中缺少元数据：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
您好，感谢您的回答。我试过了，现在它可以工作了，但是如果你有时间的话，图标现在是 1 比 2 而不是 2x2 可以看看吗？感谢您的帮助！
-
如果没有回复，我可以看看：)
标签： html css responsive-design