使用 jQuery 和 CSS 判断 iPhone6 PLUS 及各种技巧

iPhone6 PLUS *************************************************************************************** 前提 苹果公司发布了 iPhone6 及 iPhone6 PLUS, 同时,苹果手机产品的屏幕尺寸又发生了新的变化。 作为合格的前端,我们又该在Javascript 和 CSS中添加相应的代码来适应苹果的各种改变。 使用Javascript (jQuery) 来判断是否是 iPhone6 PLUS Javascript可以通过 devicePixelRatio 获取显示器的 Ratio值 iPhone6 PLUS 的这个值是 3 iPhone5/5s/6 的devicePixelRatio值是 2
if(navigator.userAgent.indexOf('iPhone') > 0){
    if(window.devicePixelRatio == 3) {
        alert('iPhone6 Plus!!'); //「iPhone6 Plus」処理
    }
}
使用Javascript 判断 iPhone6 PLUS 的屏幕状态(横向? 竖向?)
if(navigator.userAgent.indexOf('iPhone') > 0){
    if(window.devicePixelRatio == 3) {
        window.onorientationchange = setView;
        setView();
 
        function setView(){
            if(window.orientation == 0){
                alert('portrait:iPhone6 PLUS 竖向'); 
            } else {
                alert('landscape:iPhone6 PLUS 横向'); 
            }
        }
    }
}
为 iPhone6 PLUS 横向的时候添加 Class
<script>
$(function(){
    var lsClass = 'ip6landscape';
    if(navigator.userAgent.indexOf('iPhone') > 0){
        if(window.devicePixelRatio == 3) {
            window.onorientationchange = setView;
            setView();
 
            function setView(){
                if(window.orientation == 0){
                    $('body').removeClass(lsClass);
                } else {
                    $('body').addClass(lsClass);
                }
            }
        }
    }
});
</script>
利用CSS来判断 iPhone6 PLUS
@media screen and (-webkit-device-pixel-ratio:3) {
    body {
        color: #fff;
        background: #333;
    }
}
利用CSS来判断 iPhone6 PLUS的屏幕状态(横向? 竖向?)
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: portrait) {
    body {
        color: #fff;
        background: #333;
    }
}
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: landscape) {
    body {
        color: #000;
        background: #ccc;
    }
}
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容