当前位置： 文江博客话题详情

IPAD 是否有等效的 apple-touch-startup-image？

发布于 2024-08-29 04:04:03 字数 78 浏览 13 评论 0原文

对于网络应用程序，您可以使用 apple-touch-startup-image 设置启动屏幕，

那么对于 iPad 来说呢？

原文

For web apps you can set the startup screen with apple-touch-startup-image

What about for iPads?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

我还不会笑 2024-09-05 04:04:03

我也遇到了同样的问题...您需要使用 1004*768 的特定尺寸。我在这个博客中解释了这一点：http://www.amirnaor.com/?p=71

I had the same issue as well... You need to you use a specific size of 1004*768. i explained it in this blog: http://www.amirnaor.com/?p=71

回复 原文
巴黎盛开的樱花 2024-09-05 04:04:03

这将为您的 Web 应用程序添加一个启动屏幕。以下是 iPad 和 iPhone/iPod Touch 以及 iPhone 5 所需的尺寸。其中也包括状态栏区域。

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPad -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iPad (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

如果创建兼容 iPad 的 Web 应用程序，建议同时使用横向和纵向尺寸。

This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, and iPhone 5. These include the status bar area as well.

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPad -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iPad (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.

回复 原文
要走干脆点 2024-09-05 04:04:03

肖像图像需要为 768x1004（注意：1004，而不是 1024，20px 用于状态栏），PNG 是首选文件格式。

横向图像需要为 1024x748（注意：748，状态栏同样为 20px）。然后需要将该图像顺时针旋转 90 度，最终结果为 748x1024。

标题中的链接标签需要如下所示：

<link rel="apple-touch-startup-image" href="images/splash_screen_768x1004.png" media="(device-width: 768px) and (orientation: portrait)" />
<link rel="apple-touch-startup-image" href="images/splash_screen_1024x748.png" media="(device-width: 768px) and (orientation: landscape)" />

对于新的 Retina iPad（如果您不添加这些，它将使用上面的像素加倍）：

<link rel="apple-touch-startup-image"
  href="images/splash_screen_1536x2008.png" 
  media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image"
  href="images/splash_screen_2048x1496.png"
  media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />

发布时的先前答案（包括接受的答案）没有配合我的测试。

Portrait image needs to be 768x1004 (note: 1004, not 1024, 20px is for status bar), PNG is the preferred file format.

Landscape image needs to be 1024x748 (note: 748, again 20px for status bar). This image then needs to be rotated 90 degrees clockwise, end result is 748x1024.

Link tags in header need to be as follows:

<link rel="apple-touch-startup-image" href="images/splash_screen_768x1004.png" media="(device-width: 768px) and (orientation: portrait)" />
<link rel="apple-touch-startup-image" href="images/splash_screen_1024x748.png" media="(device-width: 768px) and (orientation: landscape)" />

For the new Retina iPad (if you don't add these, it will use the above with pixel doubling):

<link rel="apple-touch-startup-image"
  href="images/splash_screen_1536x2008.png" 
  media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image"
  href="images/splash_screen_2048x1496.png"
  media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />

Previous answers (including the accepted answer) at time of posting this didn't work with my testing.

回复 原文
瞳孔里扚悲伤 2024-09-05 04:04:03

我认为 Madhup 指的是用 Objective C 编写并用 xcode 编译的本机应用程序。
OP 正在尝试使其适用于通过 safari 添加到主屏幕的网络应用程序。
到目前为止还没有让它工作:(

I think Madhup is referring to native apps written in objective c and compiled with xcode.
The OP is trying to make it work for webapps that are added to the homescreen via safari.
Haven't gotten it to work so far :(

回复 原文
韬韬不绝 2024-09-05 04:04:03

我只是通过制作尺寸为 748x1024 的 PNG 图像来使启动图像正常工作。这是在固件为 3.2.1 的 iPad 上进行测试的。

I only got the startup image to work by making a PNG image with dimensions of 748x1024. This was tested on an iPad with firmware 3.2.1.

回复 原文
腻橙味 2024-09-05 04:04:03

我能找到的这个问题的最佳解释： https://gist.github.com/472519

请注意只有当我为 iPhone 提供启动图像以及为 iPad 提供横向/纵向图像时，它才对我有用。

The best explanation of this issue I could find: https://gist.github.com/472519

Note that it only worked for me once I provided a startup image for iPhone and both landscape/portrait for iPad.

回复 原文
逆光下的微笑 2024-09-05 04:04:03

从我今天的测试来看，iPad 似乎不支持 apple-touch-startup-image。令人相当失望的是，iPhone 在 OS 3.1 中确实支持此功能，而 iPad 则不支持。此外，在无铬浏览器中使用网络应用程序时，视口设置不正确。
我确实相信这两者都是 iPad OS 3.2 中的错误或遗漏。太糟糕了 ：（
我确实在苹果论坛上提出了要求： https://devforums.apple.com/thread/47178< /a>

From my testing today, it seems the iPad doesn't support the apple-touch-startup-image. It's quite disappointing that the iPhone does support this in OS 3.1, and the iPad doesn't. Also, when using a webapp in a chromeless browser, the viewport isn't set properly.
I do believe both are bugs or omissions in the iPad OS 3.2. Too bad :(
I did ask for it at the apple forums: https://devforums.apple.com/thread/47178

回复 原文
浪推晚风 2024-09-05 04:04:03

这和iphone是一样的。将名为 Default.png 的 png 放入资源文件夹中。

It's the same as the iphone. Put a png named Default.png in the resource folder.

回复 原文
~没有更多了~

关于作者

白鸥掠海

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文