Windows中Safari瀏覽器的媒體查詢不起作用

看起來這是一個常見問題，但我沒有弄明白。Windows中Safari瀏覽器的媒體查詢不起作用

我已經嘗試添加最小寬度，沒有工作，然後我嘗試了最大寬度的方法，並且我只能使用該媒體查詢。接下來的媒體查詢沒有奏效。

我該怎麼辦？我應該如何編寫媒體查詢？

我想要一個媒體查詢獲得334px最小寬度，等等。

謝謝。

我有兩種尺寸查詢。

@media only screen 
and (min-device-width:334px) { 
html.safari div#wrapper { 
background-color: gray; 
border: 32px solid transparent; 
} 
} 
@media only screen 
and (min-device-width:434px) { 
html.safari div#wrapper { 
background-color: gray; 
border: 52px solid transparent; 
} 
}

我只有最後一個查詢，當我在334px寬度。

來源

2016-05-17 Marcelo Noronha

從來就嘗試添加這樣：<元名稱= 「視口」內容= 「寬度=設備寬度」/> Didn't工作 –

的Safari I'm的版本使用的是5.1.7。 –

使用 – mlegg

我一直使用這段代碼，還沒有出現問題。 https://jsfiddle.net/mlegg10/xr2rnq15/

/* 
 
    Based on: 
 
    1. http://stephen.io/mediaqueries 
 
    2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 
 
*/ 
 

 
/* iPhone 6 in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 375px) 
 
and (max-device-width : 667px) { 
 
    
 
} 
 

 
/* iPhone 6 in landscape */ 
 
@media only screen 
 
and (min-device-width : 375px) 
 
and (max-device-width : 667px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPhone 6 in portrait */ 
 
@media only screen 
 
and (min-device-width : 375px) 
 
and (max-device-width : 667px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* iPhone 6 Plus in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 414px) 
 
and (max-device-width : 736px) { 
 
    
 
} 
 

 
/* iPhone 6 Plus in landscape */ 
 
@media only screen 
 
and (min-device-width : 414px) 
 
and (max-device-width : 736px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPhone 6 Plus in portrait */ 
 
@media only screen 
 
and (min-device-width : 414px) 
 
and (max-device-width : 736px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* iPhone 5 & 5S in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 568px) { 
 
    
 
} 
 

 
/* iPhone 5 & 5S in landscape */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 568px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPhone 5 & 5S in portrait */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 568px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* 
 
    iPhone 2G, 3G, 4, 4S Media Queries 
 
    It's noteworthy that these media queries are also the same for iPod Touch generations 1-4. 
 
*/ 
 

 
/* iPhone 2G-4S in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) { 
 
    
 
} 
 

 
/* iPhone 2G-4S in landscape */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPhone 2G-4S in portrait */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* iPad in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) { 
 
    
 
} 
 

 
/* iPad in landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPad in portrait */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* Galaxy S3 portrait and landscape */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 2) { 
 

 
} 
 

 
/* Galaxy S3 portrait */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 2) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Galaxy S3 landscape */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 2) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Galaxy S4 portrait and landscape */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) { 
 

 
} 
 

 
/* Galaxy S4 portrait */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Galaxy S4 landscape */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Galaxy S5 portrait and landscape */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) { 
 

 
} 
 

 
/* Galaxy S5 portrait */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Galaxy S5 landscape */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* HTC One portrait and landscape */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) { 
 

 
} 
 

 
/* HTC One portrait */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* HTC One landscape */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* 
 
    iPad 3 & 4 Media Queries 
 
    If you're looking to target only 3rd and 4th generation Retina iPads 
 
    (or tablets with similar resolution) to add @2x graphics, 
 
    or other features for the tablet's Retina display, use the following media queries. 
 
*/ 
 

 
/* Retina iPad in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (-webkit-min-device-pixel-ratio: 2) { 
 
    
 
} 
 

 
/* Retina iPad in landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) 
 
and (-webkit-min-device-pixel-ratio: 2) { 
 
    
 
} 
 

 
/* Retina iPad in portrait */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) 
 
and (-webkit-min-device-pixel-ratio: 2) { 
 
    
 
} 
 

 
/* 
 
    iPad 1 & 2 Media Queries 
 
    If you're looking to supply different graphics or choose different typography 
 
    for the lower resolution iPad display, the media queries below will work 
 
    like a charm in your responsive design! 
 
*/ 
 

 
/* iPad 1 & 2 in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* iPad 1 & 2 in landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* iPad 1 & 2 in portrait */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* iPad mini in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* iPad mini in landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 

 
} 
 

 
/* iPad mini in portrait */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* Galaxy Tab 10.1 portrait and landscape */ 
 
@media 
 
    (min-device-width: 800px) 
 
    and (max-device-width: 1280px) { 
 

 
} 
 

 
/* Galaxy Tab 10.1 portrait */ 
 
@media 
 
    (max-device-width: 800px) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Galaxy Tab 10.1 landscape */ 
 
@media 
 
    (max-device-width: 1280px) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Asus Nexus 7 portrait and landscape */ 
 
@media screen 
 
    and (device-width: 601px) 
 
    and (device-height: 906px) 
 
    and (-webkit-min-device-pixel-ratio: 1.331) 
 
    and (-webkit-max-device-pixel-ratio: 1.332) { 
 

 
} 
 

 
/* Asus Nexus 7 portrait */ 
 
@media screen 
 
    and (device-width: 601px) 
 
    and (device-height: 906px) 
 
    and (-webkit-min-device-pixel-ratio: 1.331) 
 
    and (-webkit-max-device-pixel-ratio: 1.332) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Asus Nexus 7 landscape */ 
 
@media screen 
 
    and (device-width: 601px) 
 
    and (device-height: 906px) 
 
    and (-webkit-min-device-pixel-ratio: 1.331) 
 
    and (-webkit-max-device-pixel-ratio: 1.332) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Kindle Fire HD 7" portrait and landscape */ 
 
@media only screen 
 
    and (min-device-width: 800px) 
 
    and (max-device-width: 1280px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) { 
 

 
} 
 

 
/* Kindle Fire HD 7" portrait */ 
 
@media only screen 
 
    and (min-device-width: 800px) 
 
    and (max-device-width: 1280px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) 
 
    and (orientation: portrait) { 
 
    
 
} 
 

 
/* Kindle Fire HD 7" landscape */ 
 
@media only screen 
 
    and (min-device-width: 800px) 
 
    and (max-device-width: 1280px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Kindle Fire HD 8.9" portrait and landscape */ 
 
@media only screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) { 
 

 
} 
 

 
/* Kindle Fire HD 8.9" portrait */ 
 
@media only screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) 
 
    and (orientation: portrait) { 
 
    
 
} 
 

 
/* Kindle Fire HD 8.9" landscape */ 
 
@media only screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Laptops non-retina screens */ 
 
@media screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* Laptops retina screens */ 
 
@media screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (min-resolution: 192dpi) { 
 
    
 
} 
 

 
/* Apple Watch */ 
 
@media 
 
    (max-device-width: 42mm) 
 
    and (min-device-width: 38mm) { 
 

 
} 
 

 
/* Moto 360 Watch */ 
 
@media 
 
    (max-device-width: 218px) 
 
    and (max-device-height: 281px) { 
 

 
}

來源

2016-05-17 17:35:23 mlegg

這很好，我想我會用最小寬度代替最小設備寬度 –

我正在尋找一個更簡單的答案。我試圖添加最小設備寬度。再次，我只獲得一個媒體查詢。我試圖添加另一個媒體查詢寬度更大的寬度，它只是不工作。它會覆蓋次要寬度查詢 –

您是否已將所有css添加到現有代碼的末尾，但是擺脫了您現在具有的響應式媒體查詢？嘗試它並將其另存爲styles2.css（或者將樣式表添加到2），然後編輯一個html頁面以說明2.css並試用它。 – mlegg

Windows中Safari瀏覽器的媒體查詢不起作用

回答

相關問題