|
在手机浏览器上打开某个网站的时候，菜单中有这么一个选项'添加到主屏幕'，当然不同的手机改菜单选项的名字有所不同基本上叫'添加到桌面'、'添加到桌面导航' 之类的， 请自行理解其中意思。
这样，主屏幕(桌面)上就会有一个该网站的快捷键图标， 点击该图标，就会直接打开网站，类似于APP。 设置主屏幕图标在 <!--ios和Android都支持--><link rel='apple-touch-icon-precomposed' href='/path/to/icon72x72@2x.png'><!--仅Android支持--><link rel='icon' href='/path/to/icon72x72@2x.png'> 设置WebApp模式从主屏图标进入网站会隐藏地址栏和状态栏, 全屏(content='yes') <!--ios和Android都支持--><meta name='apple-mobile-web-app-capable' content='yes'><!--仅Android支持--><meta name='mobile-web-app-capable' content='yes'> WindowsMobile中的设置windows手机中也有类似于添加到主屏幕的功能，称之为“磁贴” <!-- win 8 磁贴图标 --><meta name='msapplication-TileImage' content='images/touch/ms-touch-icon-144x144-precomposed.png'><!-- win 8 磁贴颜色 --><meta name='msapplication-TileColor' content='#3372DF'> IOS中相关设置<!-- 系统顶栏的颜色(content = black、white 和 black-translucent)选其一就可以 --><meta name='apple-mobile-web-app-status-bar-style' content='black'><!-- 指定标题 --><meta name='apple-mobile-web-app-title' content='Web Starter Kit'> 以上两项可以设置app的名字和顶栏的颜色 有黑色、白色、半透明黑色，经测试只有ios下支持。 总结综上所述，考虑到兼容性，我们可以这么来写  <!-- 安卓平台 chrome -->
<meta name='mobile-web-app-capable' content='yes'>
<link rel='icon' sizes='192x192' href='assets/i/app-icon72x72@2x.png'>
<!-- ios平台 safari -->
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<meta name='apple-mobile-web-app-title' content='佩佩的博客'/>
<link rel='apple-touch-icon-precomposed' href='assets/i/app-icon72x72@2x.png'>
<!-- win8以上 平台 磁贴 -->
<meta name='msapplication-TileImage' content='assets/i/app-icon72x72@2x.png'>
<meta name='msapplication-TileColor' content='#0e90d2'> 转载自 http://www./index.php/front/73.html 另外还有个单独参考的IOS 自定义iphone页面添加到主屏幕图标<link rel='apple-touch-icon' sizes='57x57' href='icons/buck-57.png' /><link rel='apple-touch-icon' sizes='60x60' href='icons/buck-60.png' /><link rel='apple-touch-icon' sizes='72x72' href='icons/buck-72.png' /><link rel='apple-touch-icon' sizes='76x76' href='icons/buck-76.png' /><link rel='apple-touch-icon' sizes='120x120' href='icons/buck-120.png' /><link rel='apple-touch-icon' sizes='144x144' href='icons/buck-144.png' /><link rel='apple-touch-icon' sizes='152x152' href='icons/buck-152.png' /> 转载自 https://blog.csdn.net/huileiforever/article/details/46638227 |
|
|
