IOS HTML5添加图标到主屏幕

拼搏现实的明天。 2023-10-09 21:47 60阅读 0赞

## 适配屏幕大小并且去掉safari的地址栏，状态栏 ##

## 设置添加到主屏幕的图标 ##

`apple-touch-icon` 与 `apple-touch-icon-precomposed`都可以设置图标，那么，多出来的`precomposed` 表示神马意思呢？没有`precomposed` 代码，一些包括圆角，阴影，反光的特效便会自动添加到生成的本地app 的logo 中。是自iOS 2.0 开始的，但如今随着iOS7 的出现，已经变得可有可无了;

![7a5ec844a9d523896c0034d9b3b7e2a4.jpeg][]

<link rel="apple-touch-icon-precomposed" 
          sizes="144x144" href="imgs/icon.png">
    <link rel="apple-touch-icon-precomposed" 
          sizes="114x114" href="imgs/icon.png">
    <link rel="apple-touch-icon-precomposed" 
          sizes="72x72" href="imgs/icon.png">
    <link rel="apple-touch-icon-precomposed" 
          sizes="57x57" href="imgs/icon.png">

## 设置启动页 ##

目前在ios9上还无法显示，具体原因还没找到。如果你知道解决方法，劳烦告诉一下我，多谢！

<link href="imgs/splash-320x460.png"
          media="(device-width: 320px) and (device-height: 480px) 
              and (-webkit-device-pixel-ratio: 1)"
          rel="apple-touch-startup-image">
    
    <link href="imgs/splash-640x920.png"
          media="(device-width: 320px) and (device-height: 480px) 
              and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">
    
    <link href="imgs/splash-640x1096.png"
          media="(device-width: 320px) and (device-height: 568px) 
              and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">
    
    <link href="imgs/splash-750x1294.png"
          media="(device-width: 375px) and (device-height: 667px) 
              and (orientation: portrait) 
              and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">
    
    <link href="imgs/splash-710x1334.jpg"
          media="(device-width: 375px) and (device-height: 667px) 
              and (orientation: landscape) 
              and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image" >
    
    <link href="imgs/splash-1242x2148.jpg"
          media="(device-width: 414px) and (device-height: 736px) 
          	  and (orientation: portrait) 
          	  and (-webkit-device-pixel-ratio: 3)"
          rel="apple-touch-startup-image" >
    
    <link href="imgs/splash-1182x2208.jpg"
          media="(device-width: 414px) and (device-height: 736px) 
              and (orientation: landscape) 
              and (-webkit-device-pixel-ratio: 3)"
          rel="apple-touch-startup-image" >
    
    <link href="apple-touch-startup-image-768x1004.png"
          media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: portrait)
             and (-webkit-device-pixel-ratio: 1)"
          rel="apple-touch-startup-image">
    
    <link href="apple-touch-startup-image-748x1024.png"
          media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: landscape)
             and (-webkit-device-pixel-ratio: 1)"
          rel="apple-touch-startup-image">
    
    <link href="apple-touch-startup-image-1536x2008.png"
          media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: portrait)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">
    
    <link href="apple-touch-startup-image-1496x2048.png"
          media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: landscape)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

## 弹出添加到主屏幕提示 ##

这里用到了第三方插件:[GitHub - cubiq/add-to-homescreen: Add to home screen call-out for mobile devices ][GitHub - cubiq_add-to-homescreen_ Add to home screen call-out for mobile devices]支持android、ios。详细用法自己去查看，以下只是在ios上简单的使用。

![86b45a59e6601ca7cfd729f0b1db1f3d.jpeg][]

<link rel="stylesheet" type="text/css" 
        href="addToHomescreen/css/addtohomescreen.css">
    <script src="addToHomescreen/js/addtohomescreen.js"></script>
    
    <script>
        
        addToHomescreen.removeSession();
        addToHomescreen();
    </script>

[7a5ec844a9d523896c0034d9b3b7e2a4.jpeg]: https://img-blog.csdnimg.cn/img_convert/7a5ec844a9d523896c0034d9b3b7e2a4.jpeg
[GitHub - cubiq_add-to-homescreen_ Add to home screen call-out for mobile devices]: https://github.com/cubiq/add-to-homescreen
[86b45a59e6601ca7cfd729f0b1db1f3d.jpeg]: https://img-blog.csdnimg.cn/img_convert/86b45a59e6601ca7cfd729f0b1db1f3d.jpeg