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 这个项目收集移动端开发所需要的一些资源与小技巧 ...
随机推荐
- hdu 2020
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2020 思路:优先队列水过priority_queue #include <cstdio> ...
- GPT vs MBR 分区 ,,, Legacy BIOS vs UEFI BIOS
MBR与GPT两种磁盘分区格式的区别 http://itoedr.blog.163.com/blog/static/120284297201378114053240 GPT Partition Tab ...
- Delphi如何处理不同类型的文件
参考:http://www.cnblogs.com/railgunman/articles/1800318.html 程序设计当中,我们时常遇到需要处理文件.目录及驱动器的情况,这里将对如何处理不同类 ...
- WIN10 新建ORACLE实例
1 管理员身份进入CMD环境,执行DBCA命令,在弹出窗口的引导中,完成实例创建 2 如果在创建过程中没有选择适当的字符集(最好采用默认字符集),如下图所示,在进入PLSQL DEVELOPER的时候 ...
- android 入门-R文件的死与活
1.图片的名字Btn_Play R文件死了. 1.答:修改图片的名字btn_play R文件活了.
- h264 profile & level
转自:http://blog.csdn.net/sphone89/article/details/17492433 H.264 Profiles H.264有四种profile,每个profile支持 ...
- AIX下禁止crs随ha启动而启动
/etc/init.crs enable /etc/init.crs disable 查看目前crs是enable还是disable状态 状态记录在一个文本文件里 /etc/oracle/scls_ ...
- LoadRunner检查点
web_reg_find("Text=ABC", "SaveCount=abc_count", LAST);51Testing软件测试网V?2Rs.J Gmdw ...
- Xamarin Android教程如何使用Xamarin开发Android应用
Xamarin Android教程如何使用Xamarin开发Android应用 在了解了Xamarin和Andriod系统之后,下面我们需要了解一下如何使用这些工具和系统来开发我们的应用程序. And ...
- Swift3.0语言教程字符串转换为数字值
Swift3.0语言教程字符串转换为数字值 Swift3.0语言教程字符串转换为数字值,在NSString中,开发者可以将字符串转换为数字值,通过这些数字值可以实现一些功能,如加法运算.减法运算等.数 ...