响应性在PC上工作但不在iPhone上工作

时间：2017-04-19 17:32:42

标签： html css responsive-design pc

当我使用'Inspect element'测试响应性时，它工作得非常好但是当我实际上将网站放在网上并用我的iPhone打开网页时它不起作用。它只是一行中的4个图标，而它应该是2x2图标。有谁可以帮我这个吗？

Website on iPhone (how it shouldn't be) Website on PC (how it should be) 

@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>

4 个答案:

答案 0 :(得分：2)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

在<head>标记内添加以上内容。

请尝试以下媒体查询以及其他样式：

 @media only screen and (max-width: 1024px){
      .icon-div .icon {
        width: 100%;
        height: 100%;
        max-width: 140px;
      }
    }
    @media only screen and (max-width: 767px){
      .icon-div .icon {
        width: 100%;
        height: 100%;
        max-width: 100px;
      }
      .icontext {
        font-size: 20px;
      }
    }
    @media only screen and (max-width: 420px){
      .icon-div .icon {
        width: 100%;
        height: 100%;
        max-width: 100px;
      }
    }

答案 1 :(得分：1)

您可以将此媒体查询用于iPhone。

@media only screen and (max-width: 480px){
  form{width:100%}
  .icon-div{width:30%}
  .icon-div .icon {width: 100%;height: 100%}

}

查看完整代码

＆＃13;
＆＃13; 
@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);
}


@media only screen and (max-width: 480px){
  form{width:100%}
  .icon-div{width:30%}
  .icon-div .icon {width: 100%;height: 100%}
}
＆＃13; 
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
 @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);
}


  </style>
</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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

请在CSS下面尝试样式表：

.icontext {
    display: block;
}

答案 3 :(得分：0)

请在页面中添加元标记 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

相关问题
最新问题