HTML5移动开发中的meta与link
meta
HTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验
viewport网页缩放
1
|
<meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> |
UTF-8编码
1
|
<meta charset= "utf-8" /> |
SEO搜索引擎相关设置
1
2
3
4
5
6
7
8
|
<!-- 作者 --> <meta name= "author" contect= "..." /> <!-- 关键词 --> <meta name= "keywords" content= "..." /> <!-- 描述 --> <meta name= "description" content= "..." /> <!-- 抓取 --> <meta name= "robots" content= "..." /> |
iOS系统相关设置
1
2
3
4
|
<!-- 禁用自动识别电话号码 --> <meta name= "format-detection" content= "telephone=no" /> <!-- 禁用自动识别电子邮件 --> <meta name= "format-detection" content= "email=no" /> |
Safari浏览器相关设置
1
2
3
4
5
6
|
<!-- 强制全屏 --> <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= "..." /> |
UC浏览器相关设置
1
2
3
4
5
6
|
<!-- 强制竖屏 --> <meta name= "screen-orientation" content= "portrait" /> <!-- 强制全屏 --> <meta name= "full-screen" content= "yes" /> <!-- 应用模式 --> <meta name= "browsermode" content= "application" /> |
QQ浏览器相关设置
1
2
3
4
5
6
|
<!-- 强制竖屏 --> <meta name= "x5-orientation" content= "portrait" /> <!-- 强制全屏 --> <meta name= "x5-fullscreen" content= "true" /> <!-- 应用模式 --> <meta name= "x5-page-mode" content= "app" /> |
360浏览器相关设置
1
2
|
<!-- 启用极速模式 --> <meta name= "renderer" content= "webkit" /> |
WP手机相关设置
1
2
|
<!-- 禁用点击高光效果 --> <meta name= "msapplication-tap-highlight" content= "no" /> |
Weibo社交标签相关设置
1
2
3
4
5
6
7
8
9
10
|
<!-- 展示标题 --> <meta property= "og:title" content= "..." /> <!-- 展示描述 --> <meta property= "og:description" content= "..." /> <!-- 展示类型 --> <meta property= "og:type" content= "..." /> <!-- 展示图片 --> <meta property= "og:image" content= "..." /> <!-- 展示链接 --> <meta property= "og:url" content= "..." /> |
link
让你的WebAPP看上去更像NativeAPP,带来不一样的用户体验
RSS订阅
1
|
<link rel= "alternate" type= "application/rss+xml" href= "rss.xml" title= "RSS" /> |
主屏图标相关设置
1
2
3
4
5
6
7
8
9
10
|
<!-- Favicons --> <link rel= "shortcut icon" type= "image/ico" href= "../images/favicon.ico" /> <!-- Android --> <link rel= "icon" sizes= "196x196" href= "../images/icon-196x196.png" /> <!-- iPhone、iTouch --> <link rel= "apple-touch-icon-precomposed" href= "../images/icon-57x57.png" /> <!-- Retina iPhone、Retina iTouch --> <link rel= "apple-touch-icon-precomposed" sizes= "114x114" href= "../images/icon-114x114.png" /> <!-- Retina iPad --> <link rel= "apple-touch-icon-precomposed" sizes= "144x144" href= "../images/icon-144x144.png" /> |
iOS启动动画相关设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!-- iPhone、iPod Touch竖屏 --> <link rel= "apple-touch-startup-image" href= "../images/icon-320x480.png" /> <!-- Retina iPhone、Retina iPod Touch竖屏 --> <link rel= "apple-touch-startup-image" sizes= "640x960" href= "../images/icon-640x960.png" /> <!-- Retina iPhone 5、Retina iPod Touch 5竖屏 --> <link rel= "apple-touch-startup-image" sizes= "640x1136" href= "../images/icon-640x1136.png" /> <!-- iPad竖屏 --> <link rel= "apple-touch-startup-image" sizes= "768x1004" href= "../images/icon-768x1004.png" /> <!-- iPad横屏 --> <link rel= "apple-touch-startup-image" sizes= "1024x748" href= "../images/icon-1024x748.png" /> <!-- Retina iPad竖屏 --> <link rel= "apple-touch-startup-image" sizes= "1536x2008" href= "../images/icon-1536x2008.png" /> <!-- Retina iPad横屏 --> <link rel= "apple-touch-startup-image" sizes= "2048x1496" href= "../images/icon-2048x1496.png" /> |
关于meta与link的设置项其实还有不少,由于太过冷门,就不一一列举了
HTML5移动开发中的meta与link的更多相关文章
- HTML5移动开发中的input输入框类型
HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...
- 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...
- 借助AMD来解决HTML5游戏开发中的痛点
借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...
- 浅析网站开发中的 meta 标签的作用
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- 前端开发中的 meta 整理
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- HTML5移动开发中的input输入框类型 (转)
公司的项目开发过程中的,的用户体验忽略了.登录tel就用tel属性.新来的小伙伴提醒的.谢谢他 数字类型number 定义input类型为type="number"时,iOS显示数 ...
- Cocos2d-x游戏开发中的消息机制:CCNotificationCenter的使用
在HTML5游戏开发中,js可以使用Event对象的addEventListener(添加事件监听).dispatchEvent(触发事件)实现监听机制,如果在coocos2d-x中,去实现这种机制该 ...
- 自动化的基于TypeScript的HTML5游戏开发
自动化的开发流程 在HTML5游戏开发或者说在Web客户端开发中,对项目代码进行修改之后,一般来说,需要手动刷新浏览器来查看代码修改后运行结果.这种手动的方式费时费力,降低了开发效率.另外,如果我们使 ...
- 小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...
随机推荐
- Javascript(JS)对Cookie的读取、删除、写入操作帮助方法
var CookieUtils = { get: function (name) { var cookieName = encodeURIComponent(name) + '=', cookieSt ...
- C#:Func的同步、异步调用(转)
实际开发中,对于一些耗时较长的操作,我们往往会将其封装成异步方式调用,以加速系统响应或改善用户体验,下面是一个示例: 有一个现成的类MyMath,里面有一个Add方法: 1 public class ...
- CSS Layout
fontline-heightcolormarginpaddingbordertext-alignbackground widthheightfloatcleardisplay 定位属性 属 性 描 ...
- JDBC-ODBC桥乱码问题解决方案
按照网上提供的ODBC连接数据库的相关资料编写代码,成功编译后运行发现,非中文字段显示正确,而中文字段却是每个汉字以?显示.关于这方面的错误baidu或google下可以找到很多解答方案,我也尝试过其 ...
- C# DataGridView中合并单元格
/// 合并GridView列中相同的行 /// /// GridView对象 /// 需要合并的列 public static void GroupRows(GridView GridView1, ...
- DebugView 调试工具
软件标签: DebugView调试工具 用debugview,打开debugview,运行你的debug版本程序,可以定位到源文件的某一行.在vc源码中需要输出的地方用 OutputDebugStri ...
- 【译文】漫谈ASP.NET中的Session
最近这两天被一个Web Farm环境下的Session处理问题虐得很痛苦,网上到处找解决方案,在无意中翻看到这篇文章,感觉很不错,顺手查了一下,貌似没有现成的译文,于是一咬牙一跺脚把这篇文章翻译出来了 ...
- Cocos2d-html5 笔记2: director
今天看了cocos2d-html5代码里面的Director. 最简单的框架 先抛开cocos2d的框架不说,对于一个游戏来说,基本的逻辑框架还是很简单的,首先初始化的时候注册mouse, touch ...
- 关于BP算法在DNN中本质问题的几点随笔 [原创 by 白明] 微信号matthew-bai
随着deep learning的火爆,神经网络(NN)被大家广泛研究使用.但是大部分RD对BP在NN中本质不甚清楚,对于为什这么使用以及国外大牛们是什么原因会想到用dropout/sigmoid ...
- MAMP Pro3.5注册码
MAMP这个就不用介绍了,堪称MAC下的苏菲玛索,官方下载地址:https://www.mamp.info/en/mamp-pro/ ,400多大洋,土豪朋友请直接购买吧,正版还是要支持的. 和我 ...