iPad apple-touch-startup-image实现portrait和landscape
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的更多相关文章
- apple touch icon 大小总结
<!-- For Chrome for Android: --> <link rel="icon" sizes="192x192" href= ...
- [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape
//判断横屏或者竖屏 function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...
- css:Media Queries: How to target desktop, tablet and mobile?
<!doctype html> <html> <head> <meta name="viewport" content="wid ...
- mobile adaptor & css media query
mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- 常见移动设备的 CSS3 Media Query 整理（iPhone/iPad/Galaxy/HTC One etc.）
@charset "utf-8"; /** * iPhone 4/4s landscape & portrait */ @media only screen and (mi ...
- 支持Touch ID！EOS 项目进展速报
Daniel Larimer 周六在 Steemit 上向大家介绍了 EOS 项目的最新进展,惊喜不少. 原文链接 : https://steemit.com/eosio/@dan/eos-io-de ...
- Web开发中管理ipad屏幕的方向变化
Web开发中,我们会遇到在手机垂直或水平视角时展示不同状态的情况.下面我来总结一下检测移动设备方向变化的一些方法. 1 使用javascript 直接看代码: <script type=&quo ...
- html5手机常见问题与工具分享
mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 ...
随机推荐
- 关于java中的异常问题 1
1.首先参考一下关于java异常处理方面的知识 查看博客http://lavasoft.blog.51cto.com/62575/18920/ 这里介绍的很好,下面从中学习到一些东西,摘抄如下: 1. ...
- Jmeter 函数
一._csvRead 函数 _cvsRead函数是从外部读取参数,csvRead函数可以从一个文件中读取多个参数. 步骤: 1.先新建一个文件,例如c.txt,里面的数据存放为 web@qq.com, ...
- Powershell实例小结（服务管理）
有关服务管理的具体实例脚本如下: #$lists="1.1.1.1","2.2.2.2" #远程ip列表 foreach ($list in $lists){ ...
- 重温WCF之群聊天程序（十）
完成的效果图: 服务器端代码: using System; using System.Collections.Generic; using System.Linq; using System.Serv ...
- Solr入门之（8）中文分词器配置
Solr中虽然提供了一个中文分词器,但是效果很差,可以使用IKAnalyzer或Mmseg4j 或其他中文分词器. 一.IKAnalyzer分词器配置: 1.下载IKAnalyzer(IKAnalyz ...
- Oracle ASM
一 Oracle ASM簡介 Oracle 10g推出的管理磁盤的新方式,用於取代LVM技術.主要用于RAC環境 二 Oracle ASM的配置安裝 1.安裝asm包 RedHat Linux5.x ...
- h5 range应用 透明度+RGB
透明度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- WPF MVVM初体验
首先MVVM设计模式的结构, Views: 由Window/Page/UserControl等构成,通过DataBinding与ViewModels建立关联: ViewModels:由一组命令,可以绑 ...
- (C#基础) byte[] 之初始化, 赋值，转换。(转)
byte[] 之初始化赋值 用for loop 赋值当然是最基本的方法,不过在C#里面还有其他的便捷方法. 1. 创建一个长度为10的byte数组,并且其中每个byte的值为0. byte[] myB ...
- 官方Tomcat 8.0.24 Web漏洞整改记录
测试环境 web服务器:apache-tomcat-8.0.24-windows-x64 测试工具:Acunetix Web Vulnerability Scanner 9.5 官方Tomcat测试结 ...