zoukankan      html  css  js  c++  java
  • [PWA] Customize the Splash Screen of a PWA built with create-react-app

    Android displays a splash screen for PWAs based on the icons and names you provide, but iOS just displays a solid color splash screen for installed PWAs by default.

    We'll make a new splash screen image for every iOS device resolution size that we want to support, and then we can make a link tag in index.html to specify those images as the splash screen for each device resolution.

    Also, make sure to remove background_color from the manifest - or it may overwrite the splash screen images on iOS.

    For Splash screen, it use 512*512 image for Andorid.

    For IOS we need to add image for splash screen, no other way around currently.

    First, we must tell iOS that the app is apple-mobile-web-app-capable with a meta tag.

    <meta name="apple-mobile-web-app-capable" content="yes">

    Then we can specify each of those launch images as the image for that resolution.

    <link rel="apple-touch-startup-image" href="splash_640x1136.jpg" media="(device- 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
      <link rel="apple-touch-startup-image" href="splash_750x1334.jpg" media="(device- 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
      <link rel="apple-touch-startup-image" href="splash_1242x2208.jpg" media="(device- 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
      <link rel="apple-touch-startup-image" href="splash_1125x2436.jpg" media="(device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
      <link rel="apple-touch-startup-image" href="splash_1536x2048.jpg" media="(min-device- 768px) and (max-device- 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
      <link rel="apple-touch-startup-image" href="splash_1668x2224.jpg" media="(min-device- 834px) and (max-device- 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
      <link rel="apple-touch-startup-image" href="splash_2048x2732.jpg" media="(min-device- 1024px) and (max-device- 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

    Finally, in manifest.json, we have to actually remove the "background_color" setting first. Otherwise, that will override all of our images.

    
    
  • 相关阅读:
    框架和库的区别
    象棋中常用的最小值最大值算法及剪枝算法
    cocos2dx 3.x中的渲染机制
    用vs2013编译lua源码方法
    VS中设置#define _CRT_SECURE_NO_WARNINGS的两种方式
    lua编程基础
    VS2013中如何更改主题颜色(深色)和恢复默认的窗口布局
    (二)识别NAND Flash Nor Flash
    Linux设备驱动之Ioctl控制
    linux驱动程序中的并发控制
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10199572.html
Copyright © 2011-2022 走看看