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

Question

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

Answer 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＆amp; 5S媒体查询 iPhone 5＆amp;画像中的5S＆amp;景观

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

iPhone 5＆amp;景观中的5S

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

iPhone 5＆amp; 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