iOS9でCSSルールが正常に動作しない

Question

サイトのCSSについてiOS9に問題があります。 CSSルールはAndroidとiOS8でうまく動作します。 iOS9では、サイトが台無しになりました。これはios8とios9の違いです。

可能な問題とどのように私はこの問題を解決することができますは何ですか？手伝ってくれてありがとう。

CSS：

section.destinations { 
    float: left; 
    width: 82.5%; 
    display: inline-block; 
    position: relative; 
    overflow: hidden; 
    margin: 0 auto; 
    font-weight: 300; 
    font-size: 1.25em; 
} 
.content-wrap { 
    position: relative; 
    border-radius: 5px; 
} 
.content-wrap section { 
    margin: 0 auto; 
    max-width: 1200px; 
    text-align: center; 
    padding: 10px; 
    border-radius: 5px; 
    background-color: white; 
    display: block; 
} 
.destinations .promo { 
    position: relative; 
    background: #fff; 
    webkit-box-shadow: 0 0 2px rgba(0,0,0,1); 
    -moz-box-shadow: 0 0 2px rgba(0,0,0,1); 
    box-shadow: 0 0 2px rgba(0,0,0,1); 
    float: left; 
    width: 23%; 
    margin: 0 2.6% 20px 0; 
    font-size: 10px; 
    text-align: left; 
    display: block; 
} 
@media screen and (max-width: 600px){ 
    section.destinations { 
     width: 100%; 
    } 
} 
@media screen and (max-width: 410px){ 
    .full .one-fourth { 
     width: 100%!important; 
     margin: 0 auto 15px!important; 
    } 
} 

HTML：

<section class="destinations clearfix full tabs tabs-style-tzoid"> 
    <div class="content-wrap"> 
     <section id="section-tzoid-1" class="content-current"> 
      <!--column--> 
      <article class="one-fourth promo" style=""> 

      </article> 
      <!--//column--> 
      <!--column--> 
      <article class="one-fourth promo" style=""> 

      </article> 
      <!--//column--> 
      <div class="clearfix"></div> 
     </section> 
    </div> 
</section> 

Answer 1

は、Web環境でのIOS9のための基本的な問題の一つにつまずいてきました。 IOS9はメディアクエリーを尊重しません。

あなたのクラスが特定の画面サイズのメディアクエリに存在する場合、それらは読み込まれず、あなたのCSSは現在のIOS9でのすべてのデバイスで同じに見えます。この問題は報告されていますが、Appleは現在、これを解決するための更新版のスケジュールをリリースしていません。

私のサイトでは、iveはディスプレイにアラートを表示しました。 ios9デ​​バイスにのみ表示される1920 pxクラス未満のメディアクエリを使用し、問題が解決されるまで表示します。

/* Device Alert (all screen, < 1920px only)*/ 
@media screen and (max-width: 1920px) { 

<style> 
.alert { 
display:none; 
} 
</style> 
} 

<div class="alert"> 
IOS9 has caused display issues with this site. Please access the site on another platform until an update is issued. 
</div> 

基本的に、メディアクエリが除外されている場合は、none：と表示されます。メディアクエリが除外されていない場合は、アラートを表示します。

これは現在役立ちます。