移动端web页面开发常用的头部标签设置
在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。
使用目的:阻止页面缩放
Safari 无效,其他均能阻止页面缩放
safari可以使用以下方法
window.onload = function() {
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {//多触点
event.preventDefault();//阻止默认缩放
}
})
var lastTouchEnd = 0;
document.addEventListener('touchend', function(event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault(); //阻止双击放大
}
lastTouchEnd = now;
}, false)
}
ios meta
<meta name="apple-mobile-web-app-capable" content="yes"/>
启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏
<meta name="apple-mobile-web-app-title" content="标题">
设置添加到主屏后的标题
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
在web app应用下状态条(屏幕顶部条)的颜色,default(白色)black(黑色) black-translucent(灰色半透明)
若值为"black-translucent"将会占据页面位置(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
<meta name="format-detection" content="telphone=no, email=no"/>
忽略页面中的数字识别为电话,忽略email识别
iOS 添加到主屏图标
<link rel="apple-touch-icon" href="apple-touch-icon.png">
ios7以前系统默认会对图标添加特效(圆角及高光),如果不希望系统添加特效,则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png"/>
iPhone 和 iTouch,默认 57x57 像素,必须有
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png"/>
Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有
图标使用的优先级如下:
- 如果没有跟相应设备推荐尺寸一致的图标,会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
- 如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
iOS 启动画面
iPhone
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png" />
iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
其他
<link rel="dns-prefetch" href="//api.m.taobao.com">
DNS预解析
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
添加 favicon icon
<meta name="renderer" content="webkit">
启用360浏览器的极速模式(webkit)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE使用现有最高版本
<meta http-equiv="Cache-Control" content="no-siteapp" />
不让百度转码
<meta name="x5-orientation" content="portrait">
QQ强制竖屏
<meta name="x5-fullscreen" content="true">
QQ强制全屏
<meta name="x5-page-mode" content="app">
QQ应用模式
<meta name="screen-orientation" content="portrait">
UC强制竖屏
<meta name="full-screen" content="yes">
UC强制全屏
<meta name="browsermode" content="application">
UC应用模式
<meta name="msapplication-tap-highlight" content="no">
windows phone 点击无高光
<meta name="robots" content="index,follow"/>
搜索引擎抓取
说明:
robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
具体参数如下:
信息参数为all:文件将被检索,且页面上的链接可以被查询;
信息参数为none:文件将不被检索,且页面上的链接不可以被查询;
信息参数为index:文件将被检索;
信息参数为follow:页面上的链接可以被查询;
信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;
信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;
参考文章
HTML meta标签总结,HTML5 head meta属性整理
Safari Web Content Guide
Safari HTML Reference
移动端web页面开发常用的头部标签设置的更多相关文章
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
- X5的UI部分和传统Web页面开发的差异
http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...
- 移动端WEB页面
百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...
- web前端开发常用组件
web前端开发常用组件 1. 对话框(dialog):jbox(适合对话框等其它功能).colorbox(也很强大,可以弥补jbox图片轮播的落点), 这二者基本能搞定所有对话框的情况 2. ...
- 常见的移动端Web页面问题
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 移动端web页面滚动不流畅,卡顿闪烁解决方案
移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...
- 移动端H5页面开发,碰到一个字体变大的BUG
移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...
随机推荐
- Linux - 日志文件简介
Linux日志文件绝大多数存放在/var/log目录,其中一些日志文件由应用程序创建,其他的则通过syslog来创建. Linux系统日志文件通过syslog守护程序在syslog套接字/dev/lo ...
- Python——使用代码平台进行识别验证码
打码平台介绍 一般使用超级鹰或打码兔的打码平台. 超级鹰介绍 打开http://www.chaojiying.com/contact.html注册用户,生成软件ID 下载python的demo文件 查 ...
- 【2019北京集训2】Elephant 平衡树
题目大意:给你一个长度为$n$的序列$A_i$,有$q$次操作,每次操作为以下三种之一: 询问区间的$F_M(A_i)$的最大公约数. 区间翻转,区间加一个正数. 我们定义$gcd(0,0)=0$,且 ...
- Mac 远程连接 Windows
推荐使用微软官方发布的 Microsoft Remote Desktop,免费.流畅. 详见:https://docs.microsoft.com/en-us/windows-server/remot ...
- 从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 数字对讲系统开发札记(前端linux c 后端 c#)
前言 数字化是一种趋势,特别是在“提速降费”的大环境下,这种趋势愈发明显.对讲机这种古老的系统也处在时代的变革之中,虽然手机的功能越来越强,让人怀疑对讲机是否还有存在的必要.诚然,对讲机仍然有它的市场 ...
- 当Elasticsearch遇见Kafka
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由michelmu发表于云+社区专栏 Elasticsearch作为当前主流的全文检索引擎,除了强大的全文检索能力和高扩展性之外,对多种 ...
- centos swap
SWAP是Linux中的虚拟内存,用于扩充物理内存不足而用来存储临时数据存在的.它类似于Windows中的虚拟内存.在Windows中,只可以使用文件来当作虚拟内存.而linux可以文件或者分区来当作 ...
- 图片人脸检测——OpenCV版(二)
图片人脸检测 人脸检测使用到的技术是OpenCV,上一节已经介绍了OpenCV的环境安装,点击查看. 往期目录 视频人脸检测——Dlib版(六)OpenCV添加中文(五)图片人脸检测——Dlib版(四 ...
- java界面设计(swing)
1.Swing基本组件 窗体控件 JFrame.容器控件 JPanel .标签控件 JLabe.按钮控件 JButton.文本框控件 JTextField 与 JTextArea(注意JScrollP ...