css媒體查詢不是針對iPhone的

Question

我有我的css文件的問題。這些樣式不適用於iPhone，而是我將iPad查詢應用於iPhone和iPad。我檢查並檢查了拼寫錯誤，找不到任何。下面是兩個iPad和iPhone查詢我的CSS文件：

CSS

/*MEDIA-QUERIES-iPAD////////////////////////////////////////////////////////////////////////////////*/ 

    @media screen and (min-width: 768px) and (max-width: 1024px) { 

     body, 
     html { 
      position: fixed;} 

     #menu {display: none;} 


     #presentacion { 
      padding: 0; 
      position: fixed; 
      display: inline-block; 
      text-align: center; 
      top: 30%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
     } 

     .buttons { 

      opacity: 1; 

     } 

     #previous { 


      background-position: 70px 45%; 
      -webkit-tap-highlight-color: transparent; 
      left: -90px; 
      width: 25%; 
      height: 100%; 
      z-index: 4; 
      position: absolute; 
     } 

     #next { 


      background-position: 110px 45%; 
      -webkit-tap-highlight-color: transparent; 
      right: -90px; 
      width: 25%; 
      height: 100%; 
      z-index: 4; 
      position: absolute; 
     } 

     #info { 

      font-size: 2em; 

     } 

     h1 { 
       line-height: 8vh; 
       font-size: 2.1em; 
     } 


     ul { 
      margin-right: 2em; 
     } 

     #front { 
      height: 750px; 
     } 

     #imagewrap { 

      top: 10%; 
      display: block; 
      margin: 0 auto; 
      width: 80%; 
      height: 80%; 
     } 

     #front { 
      background-color: red; 
     } 

     #header { 
      height: 8vh; 
     } 

     .sections { 
      width: 900px; 
      height: 500px; 
      margin: 0 auto; 
      overflow-y: hidden; 
      top: 5%; 
      padding: none; 
     } 

      .sections p { 
      font-family: Galliard; 
      display: block; 
      font-size: 1.1em; 
      line-height: 2em; 
      margin-bottom: 2em; 
      padding-right: 100px; /*important*/ 
      padding-left: 100px; /*important*/ 
      color: #666; 
      text-align: left; 
     } 

     #about.sections { 
      height: 650px; 
     } 

     #about.sections p { 
      padding-left: 125px; 
      padding-right: 125px; 
     } 

     .littleImages { 
      height: 125px; 
      width: 125px; 
      margin: 15px; 
      box-shadow: 0px 0px 15px 5px #dcdcdc; 
     } 


    } 

    /*MEDIA-QUERIES-iPHONE////////////////////////////////////////////////////////////////////////////////*/ 

    @media screen and (min-width: 375px) and (max-width: 767px) { 


     #front { 
      z-index: 6; 
      margin: 50% auto 0; 
      height: 85%;} 

     #container { 
      position: relative; 
      height: 100vh; 
      width: 100vw; 
      background-color: green; 
      overflow-y: scroll; 
      text-align: center; 
     } 


     #imagewrap { 
      margin-top: 400px; 
     } 

     #header { 
      height: 20vh; 
      background-color: red; 
     } 

     .sections { 
      width: 900px; 
      height: 650px; 
      margin: 0 auto; 
      overflow-y: hidden; 
      top: 15%; 
      padding: 50px 50px 50px 50px; 
     } 

      .sections p { 
      font-family: Galliard; 
      display: block; 
      font-size: 1.1em; 
      line-height: 2em; 
      margin-bottom: 2em; 
      padding-right: 100px; /*important*/ 
      padding-left: 100px; /*important*/ 
      color: #666; 
      text-align: left; 
     } 

     .buttons { 

      opacity: 1; 

     } 


     #info { 

      font-size: 2em; 

     } 

     #about.sections { 
      height: 650px; 
     } 

     #about.sections p { 
      padding-left: 125px; 
      padding-right: 125px; 
     } 

     .littleImages { 
      height: 125px; 
      width: 125px; 
      margin: 15px; 
      box-shadow: 0px 0px 15px 5px #dcdcdc; 
     } 

      #previous { 

       background-position: 70px 45%; 
       -webkit-tap-highlight-color: transparent; 
       left: -90px; 
       width: 25%; 
       height: 100%; 
       z-index: 4; 
       position: absolute; 
      } 

      #next { 


       background-position: 110px 45%; 
       -webkit-tap-highlight-color: transparent; 
       right: -90px; 
       width: 25%; 
       height: 100%; 
       z-index: 4; 
       position: absolute; 
      } 

    } 

我沒有看到任何明顯的拼寫錯誤或錯誤，會阻止代碼運行。爲什麼媒體查詢不起作用？任何幫助讚賞。謝謝。

Answer 1

這可能是由於沒有設置視口：https://www.w3schools.com/css/css_rwd_viewport.asp至少我沒有在代碼中看到任何視口。

另外;我總是學會了每個screentype具有不同的樣式表;維護起來更容易，移動用戶不必再花費不必要的IPad css。

要做到這一點，我把我的媒體查詢放在head標籤和一個視口之間。每個媒體查詢鏈接到單獨的.css文件

下面是使用兩種樣式的HTML文件的示例。我相信你可以通過使用'和'來擴展媒體查詢，這將允許你使用特定的樣式表來篩選最小和最大之間的屏幕尺寸。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>demo</title> 
     <link rel="stylesheet" href="reset.css" type="text/css"> <!-- My CSS reset --> 
     <link rel="stylesheet" href="style.css" type="text/css"> <!-- My main style, also for PC... --> 
     <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" /> <!-- Mediaquery that detects mobile screens and serves them the other stylesheet--> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- viewport --> 
    </head> 
    <body> 
     <p>Responsive text goes here.</p> 
    </body> 
</html>