zoukankan      html  css  js  c++  java
  • 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- 320px)" rel="apple-touch-startup-image">
    <!-- iPhone (Retina) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-640x920.png" media="(device- 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- 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
    <!-- iPad (landscape) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-748x1024.png" media="(device- 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-1536x2008.png" media="(device- 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- 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    1

  • 相关阅读:
    算法与数据结构实验题 5.2 Missile
    算法与数据结构实验题 2.3 击鼓传花
    算法与数据结构实验题 2.4 排队
    Linux 添加自定义命令
    转 32位linux内核2.6.38.2添加系统调用,编写类似"ps"命令模块显示进程信息
    Linux内核模块程序加载方法
    Linux下sched.h文件分析
    Kali 爆破和非爆破无线路由账号和密码+让别人无线掉线
    Kali基于路由器的ARP欺骗转发机制
    Kali nmap教程用法简介
  • 原文地址:https://www.cnblogs.com/sunshq/p/3739440.html
Copyright © 2011-2022 走看看