【问题标题】:CSS media query to target only iOS devices [duplicate]CSS媒体查询仅针对iOS设备[重复]
【发布时间】:2023-03-26 17:40:01
【问题描述】:

是否有 @media 查询仅针对运行 iOS 的设备?

例如:

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

这是否还会改变具有这些设备宽度的 Android 设备上的页面行为?

【问题讨论】:

  • 所有设备不仅是IOS
  • 为什么需要这个?您可以使用 javascript 获取用户代理,根据结果,您可以包含一个特殊的 css 文件。

标签: css media-queries


【解决方案1】:

简答否。 CSS 并非特定于品牌。

以下是仅使用媒体为 iOS 实施的文章。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://stephen.io/mediaqueries/

其实你可以使用PHP、Javascript来检测iOS浏览器,并据此调用CSS文件。 比如

http://www.kevinleary.net/php-detect-ios-mobile-users/

【讨论】:

    【解决方案2】:

    如上所述,简短的回答是否定的。但是我现在正在开发的应用程序中需要类似的东西,但是 CSS 需要不同的区域仅限于页面的非常特定的区域。

    如果您像我一样不需要提供完全不同的样式表,另一种选择是按照此问题的选定答案中描述的方式检测运行 iOS 的设备:Detect if device is iOS

    一旦您检测到 iOS 设备,您就可以使用 Javascript(例如,document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");、jQuery、PHP 或其他任何东西)向您的目标区域添加一个类,并使用预先存在的样式表相应地设置该类的样式.

    .iOS-device {
          style-you-want-to-set: yada;
    }
    

    【讨论】:

    • 这是我用的。我们的代码知道我们在 iPhone 上,所以在 JS 中我们将 text-area 的 font-size 更改为 16px,这看起来不错并且不会影响其他浏览器(包括桌面)
    【解决方案3】:

    是的,你可以。

    @supports (-webkit-touch-callout: none) {
      /* CSS specific to iOS devices */ 
    }
    
    @supports not (-webkit-touch-callout: none) {
      /* CSS for other than iOS devices */ 
    }
    

    YMMV.

    之所以有效,是因为只有 Safari Mobile 实现了-webkit-touch-callouthttps://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

    请注意@supports 在 IE 中不起作用。 IE 将跳过上面的两个@support 块。要了解更多信息,请参阅https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/。因此建议不要使用@supports not

    iOS 上的 Chrome 或 Firefox 怎么样?现实情况是,这些只是 WebKit 渲染引擎的皮肤。因此,只要 iOS 政策不改变,上述内容在 iOS 上的任何地方都适用。请参阅App Store Review Guidelines 中的 2.5.6。

    警告:iOS 可能会在未来几年的任何新 iOS 版本中取消对此的支持。您应该更加努力地尝试不需要上面的 CSS。该答案的早期版本使用-webkit-overflow-scrolling,但新的iOS版本将其删除。正如评论者指出的那样,还有其他选项可供选择:转到Supported CSS Properties并搜索“iOS上的Safari”。

    【讨论】:

    • -webkit-overflow-scrolling 仅在 Safari 中支持,请参阅 developer.mozilla.org/en-US/docs/Web/CSS/…
    • 这太棒了...谢谢您,我知道这不是标准方法,但有时您确实需要针对 iOS 的特殊规则,因为...因为它们是苹果的。
    • @carl 是的,这会忽略 Android,因为只有 Safari Mobile 支持 -webkit-overflow-scrolling。
    • @Johnny iOS 上的所有浏览器都基于 Safari 的 Webkit 引擎:blog.chromium.org/2016/01/... 适用于 iOS 的 Chrome 基本上是 Safari,上面添加了一些东西。
    • 如果这种情况再次发生变化,请转到 developer.apple.com/library/archive/documentation/… 并搜索“仅限 iOS 上的 Safari”
    【解决方案4】:

    我不知道将 iOS 作为一个整体来定位,但专门针对 iOS Safari:

    @supports (-webkit-touch-callout: none) {
       /* CSS specific to iOS devices */ 
    }
    
    @supports not (-webkit-touch-callout: none) {
       /* CSS for other than iOS devices */ 
    }
    

    显然,从 iOS 13 开始,-webkit-overflow-scrolling 不再响应 @supports,但 -webkit-touch-callout 仍然响应。当然这在未来可能会改变......

    【讨论】:

      猜你喜欢
      • 2014-05-19
      • 2016-05-20
      • 2021-02-26
      • 2012-05-14
      • 2017-05-14
      • 2012-01-06
      • 2020-02-15
      • 2013-01-01
      • 1970-01-01
      相关资源
      最近更新 更多