Media Queries - Target iPhone 6/ 6 Plus without older iPhones

Question

I am able to target the iPhone 6/ 6 Plus with Media Queries.

/* 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) {}

Problem:

It targets all other iPhones (iPhone 6 style - the landscape orientation for older iPhones exceeds 375px).

Is there any way around this or will I have to use JavaScript?

I would also like to target other phones like a Samsung Galaxy S4 (360px).

Cheers.

Answer 1

I guess there is not a CSS3 solution to this question?

Most Media Queries will conflict.

I have decided to answer my own question with a JavaScript approach. I hope it helps.

This will cover most scenarios. You can then add different styles for each added class.

The width checks for portrait and the height checks for landscape basically. Pretty simple.

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');
}

Phone CSS width reference: http://mydevice.io/devices/

EDIT: I forgot about nesting so you can do it with 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;
        }
    }
}