如何通過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/