css规则在iOS9上不能正常工作 [英] css rules doesn't work properly on iOS9

问题描述

我有一个问题，iOS9关于网站的CSS。 css规则在Android和iOS8上正常工作。但在iOS9上，网站搞砸了。这是ios8和ios9的区别。

i have a problem with iOS9 about site's css. css rules works fine on android and iOS8. but on iOS9, site messed up. this is the difference ios8 and ios9.

什么是可能的问题，如何我修复这个？感谢帮助。

What is the possible problem and how can i fix this? Thanks for help.

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>

推荐答案

适用于Web环境中的IOS9。 IOS9不尊重任何媒体查询。

You've stumbled on the one of the cardinal problems for IOS9 in a web environment. IOS9 does not honor any media queries.

如果你的课程在一个特定的屏幕尺寸的媒体查询，他们不会被读取和你的CSS，你的输出看起来在所有设备上相同，因为它目前在IOS9中。该问题已报告，但苹果目前尚未发布更新版本的时间表来解决这个问题。

if your classes live in a media query for a specific screen size, they won't be read and your css, your output will look the same on all devices as it currently does in IOS9. The issue has been reported but apple currently has not released a schedule for an updated version to resolve this.

在我的网站中，ive在显示中发布了警报：none;与小于1920 px类的媒体查询，只有在ios9设备上显示，直到问题解决。

In my site, ive posted an alert in a display: none; with a media query of less than 1920 px class that will only be displayed on ios9 devices and only until the problem is resolved.

/* 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>

基本上，如果媒体查询被例外，display：none ;.如果媒体查询未被例外，则显示提醒。

Basically, if the media query is excepted, display:none;. If the media query is not excepted, display the alert.

希望这有助于现在。

这篇关于css规则在iOS9上不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！