媒體css3不能在Safari瀏覽器上工作

我自定義引導程序3 >> 2 >> 1列顯示在瀏覽器調整大小或小設備上。我使用了css3媒體查詢，它可以在除Safari之外的所有瀏覽器上工作。以下是我用過的CSS。它始終使用第一個媒體查詢，並因此導致Safari出現問題。我測試了Mac和Window Safari並面臨同樣的問題。請幫忙。媒體css3不能在Safari瀏覽器上工作

視口添加在HTML頭部分

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

CSS3使用：

/*Apply different margin based on media size*/ 
@media (min-width:1632) 
{ 
.two-column .row-fluid [class*="span"]:nth-child(3n+1) 
    { 
     margin-left:100px; 
    } 
} 

@media (min-width: 981px) and (max-width: 1631px) 
{ 
    .two-column .row-fluid [class*="span"]:nth-child(2n+1) 
    { 
    margin-left:100px; 
    } 

} 

@media (min-width: 982px) and (max-width: 1155px) 
{ 
    .two-column .row-fluid [class*="span"]:nth-child(2n+1) 
    { 
    margin-left:10px; 
    } 

} 

@media (min-width: 545px) and (max-width: 981px) 
{ 
    .two-column .row-fluid .span6 
    { 
    margin-left:5%; 
    } 

} 


@media (max-width: 546px) 
{ 
    .two-column .row-fluid .span6 
    { 
    margin-left:5px; 
    } 
}

來源

2013-09-30 joy

爲什麼不在第一個媒體查詢中使用單位？例如'@media（min-width：1632px）' – Adrift

omg ....我有一個失誤的錯誤。我一直在尋找我的代碼，以找出從過去兩個星期以來愚蠢的錯誤，但無法找到.....感謝您的觀察。它的工作現在:-) – joy

引導明確不支持Windows的Safari在其瀏覽器支持文檔中闡明。

來源

2013-10-22 06:27:50 HTung

這並不一定意味着該頁面將無法在Safari上運行。他們也沒有在他們的網站上提及Firefox和Opera的Linux版本，但Bootstrapped頁面在這些版本和Windows版本之間的行爲並沒有明顯的差異。 –

同意。我們不應該被支持或不支持...我們應該堅持基本標準，然後看看什麼是不支持的。 – joy

看起來你失蹤後@media的 '像素'（最小寬度：1632）

@media (min-width:1632px)

這應該修復它。

來源

2014-02-23 13:15:00 hawaiianchimp

媒體css3不能在Safari瀏覽器上工作

回答

相關問題