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. 动手动脑及java程序之用消息框进行数的运算

        动手动脑     自信成就人生 动手动脑1 ✿仔细阅读示例: EnumTest.java,运行它,分析运行结果? package demo; public class Test { publi ...

  2. html练习

    border-left:100px solid transparent;    左边框隐藏 transform:rotate(45deg);   div旋转45度 用css做一个三角形 <sty ...

  3. 电脑没有关机可能出现发博文dns异常（write）

    现在是把装系统的技巧基本掌握,其实弄了这么多次还是有一个突破点,就是安装系统win7选择cd的iso是要ide模式.

  4. .net学习笔记----WebConfig常用配置节点介绍

    一.配置文件入门 .Net提供了一种保存项目配置信息的办法,就是利用配置文件,配置文件的后缀一般是.config.在WinForm程序中配置文件一般是App.config.在Asp.net中一般默认是 ...

  5. Spring+Maven+Dubbo+MyBatis+Linner+Handlebars—Web开发环境搭建

    本文主要分三部分,分别是:后台核心业务逻辑.桥梁辅助控制和前台显示页面. 本Web开发环境综合了多种工具,包括Maven包管理与编译工具.Dubbo分布式服务框架.MyBatis数据持久化工具.Lin ...

  6. 使用HttpWebRequest发送自定义POST请求

    平时用浏览器看网页的时候,点击一下submit按钮的时候其实就是给服务器发送了一个POST请求.但是如何在自己的C#程序里面实现类似的功能呢?本文给出了一个简单的范例,可以实现类似的和web serv ...

  7. 【JAVA Properties类概述】

    一.概述. 之前说过,该对象是和IO流相结合的技术,所以和IO流结合在一起来讲比较合适. public class Propertiesextends Hashtable<Object,Obje ...

  8. python检测文件的MD5值

    python检测文件的MD5值MD5(单向散列算法)的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2.MD3和MD4发展而来.MD5算法的使用不需要支付任何版权 ...

  9. C#从Image上读取文本

    今天通过C#来实现一个读取Image上文本的功能. 1. 环境准备: 1). 下载 Microsoft Office SharePoint Designer 2007. 2). 安装请参考KB:htt ...

  10. 静态内容生成器——Wyam

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天继续静态网站的话题,介绍我选用的一个使用.NET开发的静态内容生成器--Wyam. ...