媒體查詢不能在iPad上工作

儘管與桌面相比字體應該更大，但以下代碼在iPad上不執行任何操作...怎麼回事？媒體查詢不能在iPad上工作

<style type="text/css"> 
@media screen and (min-device-width: 481px) and (orientation:landscape) { 
.header { 
font-family: courier new, monospace; 
color: #999999; 
font-size: 16pt; 
line-height: 12pt; 
width: 38.25em; 
} 
} 
.header { 
font-family: courier new, monospace; 
color: #999999; 
font-size: 12pt; 
line-height: 12pt; 
width: 38.25em; 
} 
</style>

來源

2013-07-22 user2607261

嘗試移動另一頭類下面@media查詢，我相信第二頭類重寫媒體查詢

來源

2013-07-22 17:04:30 verbanicm

如果我把@media放在另一個'header'類的下面，兩個設備上的字體都會變大; iPad以及桌面。我正試圖達到這個目標：iPad上的16pt字體和桌面上的12pt字體。 – user2607261

我相信有什麼尺寸的標準來設置這些，你的默認應該是底部.header然後你需要一個最小和最大的iPad，iPhone等，請看這裏：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – verbanicm

您是否嘗試過測試，如果你的媒體查詢工作呢？例如，將字體更改爲完全不同的或背景色爲紅色的。這樣，你就會知道它是媒體查詢還是錯字。如果它不是拼寫錯誤，請爲媒體查詢添加最大不同的參數，這樣瀏覽器就不會感到困惑，而且您不需要重複代碼。

.header { 
     font-family: courier new, monospace; 
     color: #999999; 
     line-height: 12pt; 
     width: 38.25em; 
     } 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and    (orientation:landscape 
     { 
     .header { 
     font-size: 16pt; 
      } 
     } 

@media only screen and (min-device-width: 1025px) { 
     .header { 
     font-size: 12pt; 
      } 
     }

來源

2013-07-22 20:56:29 user2608290

非常感謝，我可以使它與上述鏈接中的說明一起工作。 – user2607261

媒體查詢不能在iPad上工作

回答

相關問題