iPad apple-touch-startup-image实现portrait和landscape

为ipad制作web应用程序的启动画面时发现个问题，只能显示竖屏图，横屏图出不来，网上的朋友都说无法解决，做了无数次尝试，终于成功，如下：

首先页面头部里要加入

<link rel=”apple-touch-startup-image” media=”screen and (orientation: portrait)” href=”/apple_startup.png”>
<link rel=”apple-touch-startup-image” media=”screen and (orientation: landscape)” href=”/apple_startup1.png”>

重点在下面：

两张图片必须符合宽高标准才能正常显示：

startup_portrait.png  768×1004

startup_landscape.png 748×1024

1、要注意横屏用图必须竖过来，也就是宽748高1024才能显示，怕说不清楚做了个示意图

2、今天又发现，在safari里选“添加到主屏幕”时要保证设备是竖放，才能在完成后成功显示启动画面。

以上在iPad 1代 4.3.1系统上实验成功。

<!-- iPhone ICON -->
<link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<!-- iPad ICON-->
<link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<!-- iPhone (Retina) ICON-->
<link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<!-- iPad (Retina) ICON-->
<link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">
 
<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

iPad apple-touch-startup-image实现portrait和landscape的更多相关文章

  1. apple touch icon 大小总结

    <!-- For Chrome for Android: --> <link rel="icon" sizes="192x192" href= ...

  2. [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape

    //判断横屏或者竖屏 function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

  3. css:Media Queries: How to target desktop, tablet and mobile?

    <!doctype html> <html> <head> <meta name="viewport" content="wid ...

  4. mobile adaptor & css media query

    mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...

  5. CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

    /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...

  6. 常见移动设备的 CSS3 Media Query 整理（iPhone/iPad/Galaxy/HTC One etc.）

    @charset "utf-8"; /** * iPhone 4/4s landscape & portrait */ @media only screen and (mi ...

  7. 支持Touch ID！EOS 项目进展速报

    Daniel Larimer 周六在 Steemit 上向大家介绍了 EOS 项目的最新进展,惊喜不少. 原文链接 : https://steemit.com/eosio/@dan/eos-io-de ...

  8. Web开发中管理ipad屏幕的方向变化

    Web开发中,我们会遇到在手机垂直或水平视角时展示不同状态的情况.下面我来总结一下检测移动设备方向变化的一些方法. 1 使用javascript 直接看代码: <script type=&quo ...

  9. html5手机常见问题与工具分享

    mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 ...

随机推荐

  1. Android自学指导

    如果想自学Android,以下的文章可以作为参考: 如何自学Android(Gityuan) 那两年炼就的Android内功修养(老罗的Android之旅)

  2. 与你相遇好幸运，Sail.js新建模型控制器

    sails generate api user  创建了user的controller和models sails generate api user index 创建了user的controller和 ...

  3. wifi参考网站

    1.Wireless LAN resources for Linux http://www.hpl.hp.com/personal/Jean_Tourrilhes/Linux/Wireless.htm ...

  4. 在ubuntu上搭建开发环境8---Ubuntu搭建Android开发环境

    需要首先配置好JDK环境 参看:http://www.cnblogs.com/xumenger/p/4460055.html 安装Eclipse 在Android developer的官网上直接下载a ...

  5. ASMCMD命令

    安装好用的rlwrap工具,在环境变量里添加如下,就能实现显示当前路径(目录),目录补全的方便功能 alias asmcmd='rlwrap -r -i asmcmd –p' asmcmd>he ...

  6. 单图上传预览(uploadpreview )

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 跟着鸟哥学Linux系列笔记0-扫盲之概念

    相关缩写全称: POSIX(Portable Operation System Interface):可携式操作系统接口,重点在于规范内核与应用之间的接口,由IEEE定义发布 IEEE: 美国电气与电 ...

  8. PAT A 1013. Battle Over Cities (25)【并查集】

    https://www.patest.cn/contests/pat-a-practise/1013 思路:并查集合并 #include<set> #include<map> ...

  9. 智能车学习(十六)——CCD学习

    一.使用硬件 1.兰宙CCD四代      优点:可以调节运放来改变放大倍数      缺点:使用软排线(容易坏),CCD容易起灰,需要多次调节   2.野火K60底层     二.CCD硬件电路 ( ...

  10. 【java基础】面向过程~面向对象

    相信大家都知道这两个东西,可是大家是如何知道的呢?我们又该如何区分这个东西到底是面向过程还是面向对象的呢? 那,我们首先就要知道什么是面向过程,什么是面向对象: 面向过程"(Procedur ...