html - 如何通过 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) "/>

但它只适用于 destop。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 媒体查询

如果您希望仅针对第 3 代和第 4 代 Retina iPad(或具有类似分辨率的平板电脑)添加 @2x 图形或平板电脑 Retina 显示屏的其他功能，请使用以下媒体查询。

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 */}

横向视网膜屏 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 */}

纵向视网膜 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/