移动端meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
这个用的最多, width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable:指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放
initial-scale:指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。
maximum-scale和minimum-scale:指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。
所有智能手机浏览器都支持ViewPort 标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。
下面的用得不多
苹果浏览器相关
<meta name="viewport" content="minimal-ui">
在iOS 7.1的Safari中为meta标签新增minimal-ui属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。
<meta name="apple-mobile-web-app-capable" content="yes">
是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏。
<meta name="apple-touch-fullscreen" content="yes">
开启对web app程序的支持。
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no" />
iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!
telephone=no就忽略页面中的数字识别为电话号码
telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启!
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name=”"apple-mobile-web-app-status-bar-style" content=”black-translucent" />
控制状态栏显示样式 default(白色)black(黑色) black-translucent(灰色半透明)
link标签apple-touch-icon
如果 apple-mobile-web-app-capable 设置为 yes 了,那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
而通过设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。
以下是针对ox不同设备,选择一个最优icon。默认iphone的大小为60px,ipad为76px,retina屏乘以2倍。
<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">
ios7以前系统默认会对图标添加特效(圆角及高光),如果不希望系统添加特效,则可以用 apple-touch-icon-precomposed.png 代替 apple-touch-icon.png
图标使用的优先级如下:
如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标,会自动搜索网站根目录下以 apple-touch-icon 为前缀的png图标。
注:ios7不再为icon添加特效,ios7以前则默认为icon添加特效,除非icon有关键字 -precomposed.png 为后缀。
IE浏览器
<meta http-equiv="X-UA-Compatible" content="IE=edge">
以最新的IE版本来显示网页
<meta name="MobileOptimized" content="320">
微软为IE Mobile版设置的定义宽度标记,浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。
<meta name="HandheldFriendly" content="true" />
是否对手持设备友好,只有true或者false
UC浏览器
<meta name="screen-orientation" content="portrait">
强制竖屏
<meta name="full-screen" content="yes">
强制全屏
<meta name="browsermode" content="application">
应用模式
QQ浏览器
<meta name="x5-orientation" content="portrait">
强制竖屏
<meta name="x5-fullscreen" content="true">
强制全屏
<meta name="x5-page-mode" content="app">
应用模式
360浏览器
<meta name="renderer" content="webkit">
开启急速模式
移动端meta的更多相关文章
- 移动端meta标签设置
移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...
- 移动端meta 解释
移动端meta 解释 <meta name="viewport" content="width=device-width, initial-scale=1.0, u ...
- 关于移动端meta设置
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initi ...
- 移动端meta标签整理-备
分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). h ...
- 关于浏览器兼容问题——还有移动端meta问题
<!DOCTYPE html><!--[if lt IE 7]> <html dir="ltr" lang="en-US" cla ...
- 移动端meta整理
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- PC端meta标签
下面介绍meta标签的几个属性,charset,content,http-equiv,name. 一.charset 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的lang特性的值覆 ...
- 移动端meta标签
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,如何阻止双击放大?user-scalable=no <!-- 禁止缩放 --> <meta name=”viewpor ...
- 移动端<meta>属性配置讲解(整理)
meta标签,是head区的辅助标签 HTML代码如下: <meta charset="utf-8"><meta http-equiv="X-UA-Co ...
- 移动端meta的使用
伴随着web app的不断火热,移动端可以说是未来的大趋势了,下面是常用的一下meta <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> ...
随机推荐
- Android自定义控件(二)
这一篇主要来讲一下自定义控件中的自定义viewgroup,我们以项目中最常用的下拉刷新和加载更多组件为例 简单介绍一下自定义viewgroup时应该怎么做. 分析:下拉刷新和加载更多的原理和步骤 自定 ...
- CSS3-04 样式 3
前言 关于 HTML/CSS 的博客也写了几篇了.该系列博客主要介绍 HTML 和 CSS 的基础,尚未过多的涉及 HTML5 和 CSS3 (即 HTML/CSS 进阶)的内容.这些博客是按照一定的 ...
- TCP流量控制与拥塞控制
为了更好地对传输层进行拥塞控制,因特网建议标准定义了以下四种算法:慢启动.拥塞避免.快重传和快恢复. 1 接收窗口rwnd与拥塞窗口cwnd 发送方在确定发送报文段的速率时,既要根据接收方的接收能力, ...
- web.xml is missing and <failOnMissingWebXml> is set to true 错误解决办法
对web项目的解决方案: 右击项目——>Java EE Tools——>Generate Deployment Descriptor Stub. 然后系统会在src/main/webapp ...
- python线程池实现
python 的线程池主要有threadpool,不过它并不是内置的库,每次使用都需要安装,而且使用起来也不是那么好用,所以自己写了一个线程池实现,每次需要使用直接import即可.其中还可以根据传入 ...
- 配置TortoiseSVN客户端, 强制签入前加注释
正如上篇提到, 总有一些人在签入代码到SVN前没有加注释, 然后, 像这样: 鬼才知道改了什么东西. ①有些人可能就是没有写注释的习惯, ②有些人可能是忘记写注释 && SVN服务端和 ...
- 3. Python 简介
3. Python 简介 下面的例子中,输入和输出分别由大于号和句号提示符 ( >>> 和 ... ) 标注:如果想重现这些例子,就要在解释器的提示符后,输入 (提示符后面的) 那些 ...
- Java Generics and Collections-2.1
2.1 子类化以及替换原理 为什么List<Integer> 不是List<Number> 的子类? 首先看下面的代码,这段代码是编译不过的 package java_gene ...
- POJ 2225 / ZOJ 1438 / UVA 1438 Asteroids --三维凸包,求多面体重心
题意: 两个凸多面体,可以任意摆放,最多贴着,问他们重心的最短距离. 解法: 由于给出的是凸多面体,先构出两个三维凸包,再求其重心,求重心仿照求三角形重心的方式,然后再求两个多面体的重心到每个多面体的 ...
- Centos6 服务器病毒查杀命令历史
top whereis vhowazeclu ll /usr/bin/v* more /usr/bin/vhowazeclu ps aux|grep vhowa ps aux|grep vhowaze ...