amazeui学习笔记一(开始使用4)--Web App 相关
amazeui学习笔记一(开始使用4)--Web App 相关
一、总结
1、桌面图标(Touch icon)解决方案:终极方案:link标签的rel和href属性: <link rel="apple-touch-icon-precomposed" href="/path/to/icon72x72@2x.png">
2、多关注目录或者说主干:
二、Web App 相关
Web App 相关
桌面图标
在开发网站的过程中我们常常会设置一个 Touch Icon。由于系统的差异性,添加到桌面图标并没有统一的标准。iOS 最早支持 Touch Icon,并有明确的规范,其他系统一定程度上支持 iOS 的规范。
终极方案
下面是兼容 iOS 4.2+ 及 Android 2.1+ 的通用写法:
<link rel="apple-touch-icon-precomposed" href="/path/to/icon72x72@2x.png">
rel="apple-touch-icon-precomposed"
:不给 Icon 添加额外的效果;兼容 Android 1.5 - 2.1。- Icon 尺寸:144px * 144px,兼容 iPhone、iPad 及绝大部分安卓设备。
如果想了解更多细节,可以继续阅读后面的内容。
iOS
<!-- Add to homescreen for Safari on iOS -->
<!-- 添加至主屏, 从主屏进入会隐藏地址栏和状态栏, 全屏(content="yes") -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 系统顶栏的颜色(content = black、white 和 black-translucent)选其一就可以 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 指定标题 -->
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<!-- 指定icon, 建议PNG格式-->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!--
使用rel="apple-touch-icon"属性为“增加高光光亮的图标”, 系统会自动为图标添加圆角及高光;
使用rel="apple-touch-icon-precomposed"属性为“设计原图图标”;
-->
尺寸说明:
机型 | iPhone 5 and iPod touch (高分辨率) | iPhone and iPod touch (高分辨率) | iPad and iPad mini (高分辨率) | iPad 2 and iPad mini (标准分辨率) |
---|---|---|---|---|
尺寸 (px) | 120 x 120 | 120 x 120 | 152 x 152 | 76 x 76 |
参考链接:
- iOS Human Interface Guidelines - Icon and Image Sizes
- Everything you always wanted to know about touch icons
- Configuring Web Applications
Android Chrome
Android 下目前只有 Chrome 31 支持 Add to Homescreen。
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="images/touch/chrome-touch-icon-196x196.png">
参考链接:
Win 8
<!-- Tile icon for Win8 (144x144 + tile color) -->
<!-- win 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- win 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#3372DF">
参考链接:
amazeui学习笔记一(开始使用4)--Web App 相关的更多相关文章
- Golang内建库学习笔记(2)-web服务器相关
package main import ( "net/http" "fmt" "strings" "log" ) fun ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- amazeui学习笔记三(你来我往1)--常见问题FAQs
amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...
- amazeui学习笔记二(进阶开发1)--项目结构structure
amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...
- amazeui学习笔记一(开始使用5)--藏品collections
amazeui学习笔记一(开始使用5)--藏品collections 一.总结 1.藏品collections:一些 Amaze UI 中没有的功能.amazeui认为好的解决方案.像图表绘制里面的百 ...
- amazeui学习笔记一(开始使用3)--兼容性列表compatibility
amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...
- amazeui学习笔记一(开始使用1)--主干
amazeui学习笔记一(开始使用1)--主干 一.总结 1.英语:学好英语,编程轻松很多 2. layouts compatibility change log web app collection ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
随机推荐
- Linux安全应用之防垃圾邮件服务器的构建
Linux安全应用之防垃圾邮件服务器的构建 一.垃圾邮件产生的原因 垃圾邮件(SPAM) 也称作UCE(Unsoticited Commercial Email.未经许可的商业电子邮件)或UBE(Un ...
- [COI2007] Patrik 音乐会的等待 单调栈
Code: #include<cstdio> #include<algorithm> #include<iostream> #include<cstring& ...
- mysql分页小结
mysql.select('*').from('books') .join('cSessionInfo', 'books.openid', 'cSessionInfo.open_id') .limit ...
- 【Django】安装及配置
目录 MVC框架与MTV框架 Django的MTV模式 Django框架图示 安装及配置 创建一个Django项目 目录介绍 运行Django项目 启动Django报错 模版文件配置 静态文件配置 A ...
- SFML学习纪要
工作需要,近段粗浅看了一下SFML,记录一下! 一.浅见概述 SFML,simple and Fast mulitmedia Library官方网站:http://www.sfml-dev.org/i ...
- 【Henu ACM Round#15 C】 A and B and Team Training
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举第一种方法. 剩下的全都个第二种方法. 看看能组成多少个队伍就可以了. [代码] #include <bits/stdc+ ...
- from disk cache 与 from memory cache
webkit资源的分类 webkit的资源分类主要分为两大类:主资源和派生资 http状态码 200 from memory cache 不访问服务器,直接读缓存,从内存中读取缓存.此时的数据时缓存到 ...
- 洛谷 P1460 健康的荷斯坦奶牛 Healthy Holsteins
P1460 健康的荷斯坦奶牛 Healthy Holsteins 题目描述 农民JOHN以拥有世界上最健康的奶牛为傲.他知道每种饲料中所包含的牛所需的最低的维他命量是多少.请你帮助农夫喂养他的牛,以保 ...
- C++ Primer笔记12_运算符重载_递增递减运算符_成员訪问运算符
1.递增递减运算符 C++语言并不要求递增递减运算符必须是类的成员.可是由于他们改变的正好是所操作对象的状态.所以建议设定为成员函数. 对于递增与递减运算符来说,有前置与后置两个版本号,因此.我们应该 ...
- CSS3的属性选择器
CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...