WindowsのSafariのメディアクエリが機能しない

Question

これは一般的な問題だと思われますが、修正されていません。

min-widthを追加しようとしましたが、動作しませんでしたが、最大幅のアプローチを試しました。次のメディアクエリは機能しません。

私は何ができますか？どのようにメディアのクエリを書く必要がありますか？

メディアクエリで334px分の幅を取得するなどが必要です。

ありがとうございました。

私は2つのサイズのクエリを持っています。

@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の幅になっています。

Answer 1

私はこのコードを常に使用していますが、haventにはまだ問題があります。 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) { 
 

 
}