CSS3 Media query for iphone:
Each version of the iphone media query is based on its resolution and some CSS3 media query features to achieve media query ... See below:
IPhone6 Media Query:
@media only screen and ( min-device-width:375px) and (MAX-DEVICE-WIDTH:667PX) and (orientation:portrait){/*IPhone 6 Portrait*/}@media only screen and ( min-device-width:375px) and (MAX-DEVICE-WIDTH:667PX) and (Orientation:landscape){/*IPhone 6 Landscape*/}@media only screen and ( min-device-width:414px) and (max-device-width:736px) and (orientation:portrait){/*iPhone 6+ Portrait*/}@media only screen and ( min-device-width:414px) and (max-device-width:736px) and (Orientation:landscape){/*iPhone 6+ Landscape*/}@media only screens and (max-device-width:640px), only screens and (MAX-DEVICE-WIDTH:667PX), only screens and (Max-widt h:480px){/*iphone 6 and iphone 6+ portrait and landscape*/}@media only screens and (max-device-width:640px), only screens and (MAX-DEVICE-WIDTH:667PX), only screens and (Max-widt h:480px) and (orientation:portrait){/*iphone 6 and iphone 6+ portrait*/}@media only screens and (max-device-width:640px), only screens and (MAX-DEVICE-WIDTH:667PX), only screens and (Max-widt h:480px) and (Orientation:landscape){/*iphone 6 and iphone 6+ landscape*/
View Code
Referenced from: IPhone6 's CSS3 media query
Each phone-side version resolution differs from the actual resolution in CSS by comparing the table:
Referenced from: Mydevice.io
CSS3 Media Query for iphone