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浏览器的媒体查询不起作用

回答

相关问题