landscape & portrait

ipad

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

ipad Retina

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 2) {}

ipad1 & ipad2

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {}

ipad mini

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 1) {}

iphone 6p & iphone6

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){}

iphone 5

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}

iphone 2G-4S

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

landscape

ipad

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

ipad Retina

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

ipad1 & ipad2

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}

ipad mini

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}

iphone 6p & iphone6

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){}

iphone 6p

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}

iphone 6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}

iphone 5

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}

iphone 2G-4S

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}

portrait

ipad

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

ipad Retina

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}

ipad1 & ipad2

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}

ipad mini

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 1) {}

iphone 6p & iphone6

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){}

iphone 6p

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}

iphone 6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {}

iphone 5

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}

iphone 2G-4S

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}

ipad mini resolution

Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)
Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)
Device-pixel-ratio: 1

Resolution

iPhone 5 Resolution

Screen Width = 320px (CSS Pixels)

Screen Height = 568px (CSS Pixels)

Screen Width = 640px (Actual Pixels)

Screen Height = 1136px (Actual Pixels)

Device-pixel-ratio: 2

iPhone 4/4S Resolution

Screen Width = 320px (CSS Pixels)

Screen Height = 480px (CSS Pixels)

Screen Width = 640px (Actual Pixels)

Screen Height = 960px (Actual Pixels)

Device-pixel-ratio: 2

iPhone 2G/3G/3GS Resolution

Screen Width = 320px (CSS Pixels)

Screen Height = 480px (CSS Pixels)

Screen Width = 320px (Actual Pixels)

Screen Height = 480px (Actual Pixels)

Device-pixel-ratio: 1

原文链接：https://blog.csdn.net/john_zhu_linux/article/details/49511249