如何仅为没有 JS 的 iPhone 浏览器设置 CSS 规则？答案

【问题标题】：How to set CSS rule only for iPhone browsers without JS?如何仅为没有 JS 的 iPhone 浏览器设置 CSS 规则？
【发布时间】：2015-10-12 15:07:19
【问题描述】：

我只需要为 iPhone 浏览器设置特定的 CSS 规则：CriOS 和 Safari。我可以在不使用任何 JS 代码的情况下在 CSS 文件中执行此操作吗？

【问题讨论】：

标签： javascript css iphone safari

【解决方案1】：

简短的回答：你不能。但是如果iPhone不是必需的，屏幕分辨率还可以，可以使用media queries。

这不是一个完整的 iPhone 解决方案，屏幕分辨率也适用于其他移动浏览器，但您可以通过这种方式获得合适的性能。

iPhone 6 纵向和横向

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

iPhone 6 横屏

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

iPhone 6 纵向

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ }
iPhone 6 Plus Media Queries
iPhone 6 Plus in portrait & landscape
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { /* STYLES GO HERE */}

iPhone 6 Plus 横屏

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

iPhone 6 Plus 纵向

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

iPhone 5 & 5S 媒体查询 iPhone 5 和 5S 纵向和横向

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 和 5S 横向

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

iPhone 5 和 5S 纵向

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

iPhone 2G、3G、4、4S 媒体查询 iPhone 2G-4S 纵向和横向

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* STYLES GO HERE */}

iPhone 2G-4S 横屏

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

iPhone 2G-4S 纵向

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

iPhone 5 分辨率

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 分辨率

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 分辨率

 Screen Width = 320px (CSS Pixels)
 Screen Height = 480px (CSS Pixels)

 Screen Width = 320px (Actual Pixels)
 Screen Height = 480px (Actual Pixels)

 Device-pixel-ratio: 1

【讨论】：