移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签...
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 页面描述 --> <meta name="description" content="不超过150个字符"/> <!-- 页面关键词 --> <meta name="keywords" content=""/> <!-- 网页作者 --> <meta name="author" content="name, email@gmail.com"/> <!-- 搜索引擎抓取 --> <meta name="robots" content="index,follow"/> <!-- 为移动设备添加 viewport --> <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --> <!-- iOS 设备 begin --> <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题(iOS 6 新增) --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 --> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) --> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- 设置苹果工具栏颜色 --> <meta name="format-detection" content="telphone=no, email=no"/> <!-- 忽略页面中的数字识别为电话,忽略email识别 --> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 不让百度转码 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- iOS 图标 begin --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/> <!-- Retina iPad,144x144 像素,可以没有,但推荐有 --> <!-- iOS 图标 end --> <!-- iOS 启动画面 begin --> <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/> <!-- iPad 竖屏 768 x 1004(标准分辨率) --> <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/> <!-- iPad 竖屏 1536x2008(Retina) --> <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/> <!-- iPad 横屏 1024x748(标准分辨率) --> <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/> <!-- iPad 横屏 2048x1496(Retina) --> <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --> <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --> <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --> <!-- iOS 启动画面 end --> <!-- iOS 设备 end --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> <!-- 添加 RSS 订阅 --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> <!-- 添加 favicon icon --> <!-- sns 社交标签 begin --> <!-- 参考微博API --> <meta property="og:type" content="类型" /> <meta property="og:url" content="URL地址" /> <meta property="og:title" content="标题" /> <meta property="og:image" content="图片" /> <meta property="og:description" content="描述" /> <!-- sns 社交标签 end --> <title>标题</title></head>
原文链接 (http://caibaojian.com/mobile-meta.html)
转载于:https://www.cnblogs.com/juary-blog/p/4846355.html
移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签...相关推荐
- 前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式 通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
- 前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- 前端开发中常用图片格式
前端开发中常用图片格式 在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...
- 初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- 前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
- 前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
- css grid随页面大小_前端开发中各种设置CSS间距的优点缺点及实例「实践」
前言 如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此.当对多个设计元素进行分组时,用户可以根据它们之间的空间大小来决定它们之间的关系.没有间距,用户将很难浏览页面并知道哪些内容相关而 ...
- 前端开发中的地理定位问题小总结
项目中遇到地理定位的问题,没遇过不知道,遇过就发现这是个比较坑的问题.这个问题其实困扰了我挺久的,还不如一次性了解清楚.所以本文进行了一些小总结,先简单总结我看过的关于定位技术的资料,然后介绍前端开发 ...
- java backbone_[Java教程]移动前端开发中的Backbone之一:Backbone中的模型和集合
[Java教程]移动前端开发中的Backbone之一:Backbone中的模型和集合 0 2015-09-24 17:00:04 当我们开发含有大量Javascript的web应用程序时,首先你需要做 ...
最新文章
- 兄弟俩都是院士!哥哥在南大,弟弟在复旦
- Kubernetes学习笔记三:Docker安装,Docker使用,编写Dockerfile,制作容器镜像,上传docker镜像
- Apache Solr schema.xml及solrconfig.xml文件中文注解
- opencv打开相机实时采集与处理
- HOG可视化 opencv
- 隐马尔可夫模型中的Viterbi算法zz
- 【译】ES2018 新特性: 正则表达式的 s (dotAll) 标志
- MySQL绿色版 官网下载+安装(win7)
- 网络爬虫--13.数据提取之JSON与JsonPATH
- vue路由1.0_【Vue】路由
- 电子健康行业调研报告 - 市场现状分析与发展前景预测(2021-2027年)
- SpringMVC集成shrio框架
- select * from data where 姓名_SQL基础where
- VssPlus1.1-微软VSS增强工具
- 小米air如何装linux双系统,小米笔记本安装Win10+Ubuntu16.04 LTS 双系统
- pip install numpy 安装numpy失败
- 信息系统项目管理师论文范围管理范文(2021上半年范围管理论文)
- 天天酷跑php源码_run 模仿“天天酷跑”的游戏功能,涉及引擎编程,Libgdx 结构。图像绘制和动画,地图编 Game Engine 271万源代码下载- www.pudn.com...
- 【GAOPS045】PDH(E1/T1/J1)和SDH
- php图片是啥,PHP图片操作
热门文章
- c语言修仙东君嗯哼,C语言修仙
- 3a算法 isp_Isp图像算法工程师
- pythonexcel工具介绍_Python处理excel的强大工具
- 【收藏】Linux系统常用命令速查手册(附赠PDF档)
- 这个文件传输神器完爆 FTP
- 课时 21:Kubernetes 存储架构及插件使用(阚俊宝)
- 抗锯齿_最好的抗锯齿,画质保留提升帧数
- tf卡低级格式化_华为授权雷克沙nCARD评测:用了这么多年TF卡,该换换了
- 如何取回服务器上的文件网页设计,毕业设计(论文)-基于内容中心网络开发平台的文件分享精选.docx...
- python读取路径太长_路径名太长,无法打开?