針對iPad的Safari瀏覽器（僅限於）針對iPad和更低版本的Css媒體查詢

Question

還有其他幾個帖子要求提供類似的解決方案，但我一直無法獲得任何發佈的答案以供我們使用。我們需要針對Safari瀏覽器在iPhone和iPad

/* Safari 7.1+ */ 
@media only screen and (max-device-width: 768px), 
only screen and (-webkit-min-device-pixel-ratio:0) { 
    .hero-section { 
    sa-search-nav ion-row { 
    background: none; 
    } 

    .search-form { 
    ion-col.select { 
     margin-top: 0px; 
     margin-left: 0px; 
    } 
    } 
} 

    form.search-form { 
    min-height: 300px; 
    } 
} 

Answer 1

這裏沒有魔法，CSS媒體查詢是不是太厲害呢，來完成你想要的東西。任何最大寬度爲768px的設備都將遵循相同的CSS規則。

我想你所需要的就是一個黑客：

@media only screen and (max-device-width: 768px), 
only screen and (-webkit-min-device-pixel-ratio: 0) { 

    // Safari 6.2,7.1+ 
    _::-webkit-full-page-media, _:future, :root { 

    .hero-section { 
     sa-search-nav ion-row { 
     background: none; 
     } 

     .search-form { 
     ion-col.select { 
      margin-top: 0px; 
      margin-left: 0px; 
     } 
     } 
    } 

    form.search-form { 
     min-height: 300px; 
    } 

    } 
} 

即使這一點，但是，不能保證這個代碼將僅在移動設備上運行。請注意，上面的代碼是SCSS，而不是CSS。我相信你也是。請嘗試一下，讓我知道。感謝Jeff Clayton。