如何根据使用的 IOS 设备在 head 标签中使用不同的 <link> 标签？

Posted 2023-03-12

【中文标题】如何根据使用的 IOS 设备在 head 标签中使用不同的 <link> 标签？

【英文标题】：how to use a different <link> tag in the head tag depending on what IOS device is being used?

【发布时间】：2014-05-27 23:56:25

【问题描述】：

我正在为 ios 设备制作一个网络应用程序，我在 head 标签中使用的链接标签之一是：

<link rel="apple-touch-startup-image" href="images/startup.png" />

它的作用是创建一个启动画面图像，该图像会在应用打开前显示一秒钟。但是对于这个图像，它必须是一个特定的大小才能工作。这对于 Iphone/Ipod 和 Ipad 是不同的。

我的问题是如何使用仅在 Ipad 用户使用应用程序时使用的不同图像（具有 Ipad 的图像大小要求）？

【参考方案1】：

您可以使用多个<link> 标签，每个标签都有自己的media 属性，这将根据媒体查询确定它们是否被加载。例如：

<!-- iPhone 3.5" Non-Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="images/startup-320x460.png">
<!-- iPhone 3.5" Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="images/startup-640x920.png">
<!-- iPhone 4" Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/startup-640x1096.png">

<!-- iPad Non-Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="images/startup-768x1004.png">
<!-- iPad Non-Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="images/startup-748x1024.png">
<!-- iPad Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="images/startup-1536x2008.png">
<!-- iPad Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="images/startup-2048x1496.png">

【讨论】：

谢谢！只是检查一下，这是否覆盖了所有 idevice 的屏幕？

是的，它应该可以处理当前生产的所有 iOS 设备。

【参考方案2】：

使用 JQuery 然后检查函数。

检查后，您可以对此进行引用，并根据 JQuery 检查返回的内容更新<link> 引用。

if( /android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
 // some code..

或

另一种在我看来效率不高的方法是直接引用CSS。您可以使用它来根据屏幕大小更改图像大小。

/* Smartphones ----------- */
@media only screen and (max-width: 760px) 
  #some-element  display: none;