iphone 媒体查询

/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

/* iphone 6, 6s */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

/* iphone 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 超高速音视频编码器用法: ffmpeg [options] [[infile options] -i infile...
    吉凶以情迁阅读 4,677评论 0 4
  • -:Internet Explorer CSS :- SpecialPurpose _::selection, :...
    弥果阅读 1,332评论 0 1
  • body, h1, p, ul{ margin: 0; padding: 0; } li{ list-style:...
    WeekOne阅读 184评论 0 1
  • ㈠时间 ㈡地点 ㈢形式 ㈣目的 ①青州博物馆 青州之名,始见《尚书·禹贡》:“海岱惟青州”,为古“九州”之一。...
    我爱文博阅读 857评论 0 0
  • 作者简介:执念,“你是无意穿堂风,却偏偏引山洪;我是垂眉摆渡翁,却偏偏独爱侬”。执着的人总是最容易受伤,总是喜欢用...
    Delusion7GE阅读 335评论 0 0