如何通过iPhone/iPad检测css

Question

我想根据设备更改css样式。

我写了这样的

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" 
media="only screen and (min-width : 1224px) "/> 

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/iphone.css")" 
media="only screen and (max-device-width: 480px) "/> 

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/ipad.css")" 
media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) "/> 

但它只能桌面。 Ipad和Iphone没有加载样式表。

请告诉我mu代码有什么问题。

Answer 1

您可以通过媒体查询来做到这一点。下面的细节肯定会帮助你达到这个目标。

的iPad在纵向&景观

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

iPad的景观

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

的iPad在肖像

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

的iPad 3 & 4媒体查询

如果您只想定位第三代和第四代视网膜iPad（或具有类似分辨率的平板电脑）为平板电脑的Retina显示屏添加@ 2x图形或其他功能，请使用以下媒体查询。

的Retina iPad的纵向&景观

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

的Retina iPad的景观

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

的Retina iPad的纵向

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

的iPad 1 & 2个媒体查询

如果您希望为低分辨率iPad显示器提供不同的图形或选择不同的版式，下面的媒体查询将在您的响应式设计中像魅力一样起作用！

的iPad 1 & 2在纵向&风景

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

的iPad 1 & 2在横向

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

的iPad 1 & 2在纵向

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

参考：http://stephen.io/mediaqueries/