<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的更多相关文章

  1. 移动端meta标签设置

    移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...

  2. 移动端meta 解释

    移动端meta 解释 <meta name="viewport" content="width=device-width, initial-scale=1.0, u ...

  3. 关于移动端meta设置

    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initi ...

  4. 移动端meta标签整理-备

    分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). h ...

  5. 关于浏览器兼容问题——还有移动端meta问题

    <!DOCTYPE html><!--[if lt IE 7]> <html dir="ltr" lang="en-US" cla ...

  6. 移动端meta整理

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. PC端meta标签

    下面介绍meta标签的几个属性,charset,content,http-equiv,name. 一.charset 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的lang特性的值覆 ...

  8. 移动端meta标签

    现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,如何阻止双击放大?user-scalable=no <!-- 禁止缩放 --> <meta name=”viewpor ...

  9. 移动端<meta>属性配置讲解(整理)

    meta标签,是head区的辅助标签 HTML代码如下: <meta charset="utf-8"><meta http-equiv="X-UA-Co ...

  10. 移动端meta的使用

    伴随着web app的不断火热,移动端可以说是未来的大趋势了,下面是常用的一下meta <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> ...

随机推荐

  1. SwipeRefreshLayout + RecyclerView 实现 上拉刷新 和 下拉刷新

    下拉刷新和上拉刷新都用SwipeRefreshLayout 自带的进度条 布局 <?xml version="1.0" encoding="utf-8"? ...

  2. 【原】iOS动态性(五)一种可复用且解耦的用户统计实现(运行时Runtime)

    声明:本文是本人 编程小翁 原创,转载请注明. 为了达到更好的阅读效果,强烈建议跳转到这里查看文章. iOS动态性是我的关于iOS运行时的系列文章,由浅入深,从理论到实践.本文是第5篇.有兴趣可以看看 ...

  3. 自动化运维,远程交互从服务器A上ssh到服务器B上,然后执行服务器B上的命令。

    第一种: ftp -v -n 192.168.0.1 21 <<! user ftp ftp123 bay ! 第二种: { echo -e "\n" echo -e ...

  4. python-切片 迭代 生成器

    1 切片操作 >>> L ['aaa', 'bbb', 'ccc', 'ddd'] >>> L[0:3] ['aaa', 'bbb', 'ccc'] >> ...

  5. String.Empty、null、“” 区别

    概念准备: 1.引用类型是将对象是实际数据保存在堆中, 将对象在堆中的地址保存在栈中. 2.值类型直接将实际数据存放在堆中,不会将对象在堆中的地址保存在栈中. 一.String.Empty和" ...

  6. JavaWeb开发环境准备之Linux篇

    01 Linux环境准备 (本文在win10上使用 VMware12 + Ubuntu14.04)   1.JDK安装及相关配置 参考:http://blog.csdn.net/sxdtzhaoxin ...

  7. 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式值

    问题描述:在SQL SERVER 2008中,向数据表中字段插入数据时,会报错,错误如下: 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式 ...

  8. 【Windows编程】系列第二篇:Windows SDK创建基本控件

    在Win32 SDK环境下,怎么来创建常用的那些基本控件呢?我们知道如果用MFC,简单的拖放即可完成大多数控件的创建,但是我们既然是用Windows SDK API编程,当然是从根上解决这个问题,实际 ...

  9. 在Azure上实现Linux Server故障转移

    要充分利用公有云的弹性扩展和高可用, 首先要在应用系统层面支持横向扩展(scale out),这个说起来很容易,或者说对新开发的应用系统而言已经成为标配.但是对已有的.老旧的应用系统来说,这就比较困难 ...

  10. [译文]选择使用正确的 Markdown Parser

    以下客座文章由Ray Villalobos提供.在这篇文章中Ray将要去探索很多种不同的Markdown语法.所有的这些MarkDown变种均提供了不同的特性,都超越传统的Markdown语法,却又相 ...