媒体查询 - 目标iPhone 6/6 Plus没有旧的iPhone

时间:2015-03-03 22:59:22

标签: javascript iphone css3 media-queries

我可以使用Media Queries定位iPhone 6/6 Plus。

/* iPhone 6 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {}

/* iPhone 6 Plus */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {}

问题:

它针对所有其他iPhone(iPhone 6风格 - 旧版iPhone的横向方向超过375px)。

有什么方法可以使用JavaScript吗?

我还想定位其他手机,如三星Galaxy S4(360px)。

干杯。

1 个答案:

答案 0 :(得分:2)

我猜这个问题没有CSS3解决方案?

大多数媒体查询都会发生冲突。

我决定用JavaScript方法回答我自己的问题。我希望它有所帮助。

这将涵盖大多数情况。然后,您可以为每个添加的类添加不同的样式。

宽度检查纵向和高度基本上检查横向。很简单。

var $banner = $('#banner'),
    h = window.innerHeight,
    w = window.innerWidth;

if (w === 320 || h === 320) {
    //iPhone 5 or below
    $banner.addClass('iPhone');
} else if (w === 375 || h === 375) {
    //iPhone 6
    $banner.addClass('iPhone6');
} else if (w === 414 || h === 414) {
    //iPhone 6 Plus
    $banner.addClass('iPhone6Plus');
} else if (w === 346 || h === 346) {
    //Smart phone e.g. Q10
    $banner.addClass('smartPhoneSmall');
} else if (w === 360 || h === 360) {
    //Smart phone e.g. Samsung Galaxy S3/ S4
    $banner.addClass('smartPhoneMed');
} else if (w === 384 || h === 384) {
    //Smart phone e.g. LG Nexus 4
    $banner.addClass('smartPhoneBig');
} else if (w === 400 || h === 400) {
    //Smart phone e.g. Samsung Galaxy Note
    $banner.addClass('smartPhoneLarge');
}

手机CSS宽度参考:http://mydevice.io/devices/

编辑:我忘记了嵌套,因此您可以使用CSS3

/* Portrait Styles */
@media only screen and (orientation : portrait) {
    @media only screen and (min-device-width: 346px) and (max-device-width: 359px) {
        /* Small Smartphones e.g. Q10 */
        .banner {
            height: 129px;
            width: 346px;
        }
    }
    @media only screen and (min-device-width: 360px) and (max-device-width: 374px) {
        /* Medium Smartphones e.g. Samsung Galaxy S3/ S4 */
        .banner {
            height: 135px;
            width: 360px;
        }
    }
    @media only screen and (min-device-width: 375px) and (max-device-width: 383px) {
        /* iPhone 6 */
        .banner {
            height: 140px;
            width: 375px;
        }
    }
    @media only screen and (min-device-width: 384px) and (max-device-width: 399px) {
        /* Big Smartphones e.g. LG Nexus 4 */
        .banner {
            height: 144px;
            width: 384px;
        }
    }
    @media only screen and (min-device-width: 400px) and (max-device-width: 413px) {
        /* Large Smartphones e.g. Samsung Galaxy Note */
        .banner {
            height: 150px;
            width: 400px;
        }
    }
    @media only screen and (min-device-width: 414px) {
        /* iPhone 6 Plus */
        .banner {
            height: 155px;
            width: 414px;
        }
    }
}

/* Landscape Styles */
@media only screen and (orientation: landscape) {
    @media only screen and (min-device-height: 346px) and (max-device-height: 359px) {
        /* Small Smartphones e.g. Q10 */
        .banner {
            height: 129px;
            width: 346px;
        }
    }
    @media only screen and (min-device-height: 360px) and (max-device-height: 374px) {
        /* Medium Smartphones e.g. Samsung Galaxy S3/ S4 */
        .banner {
            height: 135px;
            width: 360px;
        }
    }
    @media only screen and (min-device-height: 375px) and (max-device-height: 383px) {
        /* iPhone 6 */
        .banner {
            height: 140px;
            width: 375px;
        }
    }
    @media only screen and (min-device-height: 384px) and (max-device-height: 399px) {
        /* Big Smartphones e.g. LG Nexus 4 */
        .banner {
            height: 144px;
            width: 384px;
        }
    }
    @media only screen and (min-device-height: 400px) and (max-device-height: 413px) {
        /* Large Smartphones e.g. Samsung Galaxy Note */
        .banner {
            height: 150px;
            width: 400px;
        }
    }
    @media only screen and (min-device-height: 414px) {
        /* iPhone 6 Plus */
        .banner {
            height: 155px;
            width: 414px;
        }
    }
}