html5 meta头部设置

<meta name="viewport" content="height=[pixel_value | device-height], width=[pixel_value | device-width], inital-scale=float_value, minimum-scale=float_value, maximum-scale=float_value, user-scalable=[yes|no], target-densitydpi=[dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]" />

width:控制 viewport的大小,可以指定一个值或者特殊的值,如 device-width为设备的宽度(单位为缩放为 100%时的 css 的像素)

height:和width相对应,指定高度

initial-scale:初始缩放,即页面初始缩放程序,这是一个浮点值,是页面大小的一个乘数,例如,如果你设置初始缩放为 "1.0",那么,web页面在展现的时候就会以 target density分辨率  1:1 来展现,如果设置为 2.0,则这个页面就会放大 2倍

maximum-scale:最大缩放。即允许的最大缩放程序。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如:如果将这个值设置为 2.0,则这个页面与 target size 相比, 最多就会被放大为 2 倍

user-scalable:用户调整缩放。即用户是否能改变页面缩放程度,如果设置为 yes,则是允许用户对其进行改变,反之为 no,默认为 yes,如果设置为 no,则 minimum-scale, maximum-scale都被忽略
所有的缩放值都必须为 0.01-10之间

target-densitydpi:一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。android支持三种屏幕像素密度,低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。android browser 和 webview默认屏幕为中像素密度。
取值如下:
device-dpi:使用设备原来的 dpi作为目标 dp,不会发生默认缩放
high-dpi:用 hdpi作为目标 dpi,中等像素密度和低像素密度设备相应缩小
medium-dpi:用 mdpi作为目标dpi,高像素密度设备相对放大,这是默认的 target density.
low-dip:(原理同上)
value:指定一个值,必须为 70-400之间
as:
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-desitydpi=200" />

<meta content="telephone=no" name="format-detection" />
告诉设备忽略将页面中的数字识别为电话号码

iphone设备特有的:
<meta content="yes" name="apple-mobile-web-app-capable" />
允许全屏模式浏览
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
指定的 iphone中的 safai顶端的状态的样式
在 web app应用下状态条(屏幕顶部条)的颜色:
默认值为 default(白色),可以定义为 black(黑色)和 black-translucent(灰色半透明)
注意,若值为 black-translucent 将会占据页面 px 位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)
示例:
天猫:
<meta content="width=device-width,inital-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

淘宝:
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta content="telephone=no" name="format-detection" />

网易:
<meta content="width=device-width,user-scalable=no" name="viewport" />

时间: 2024-12-22 02:20:05

html5 meta头部设置的相关文章

HTML5各种头部meta标签的功能

<!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang="en"> 标准的 lang 属性写法 <meta charset='utf-8′>    声明文档使用的字符编码 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome &l

html5 meta标签属性整理

html5 meta标签属性整理 前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下,终于找个个描述得比较全的网站(点击进入),本人有点强迫症,硬是把它写进自己的博客,当然这还不是最全的,以后会慢慢修改至完整. 基本标签 声明文档使用的字符编码 <meta charset='utf-8'> 声明文档的兼容模式 //指示IE以目前可用的最高模式显示内容 <meta http-

简单手机端头部设置 及css代码

<html> <head> <title>今日报表</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> </he

HTML5自定义属性的设置与获取

<div id="box" aaa="bbb" data-info="hello"></div> <body> <script> var box = document.getElementsByTagName("div")[0]; console.log(box.dataset['info']); console.log(box.id);//box console.log(box

Sublime Text 3如何快速生成HTML5的头部信息和常用的快捷键

一.快速生成HTML5的头部信息的步骤: 1.Ctrl + N,新建一个文档: 2.Ctrl + Shift + P,打开命令模式,再输入 sshtml 进行模糊匹配,将语法切换到html模式: 3.输入  !,再按下 Tab键或者 Ctrl + E ,就能快速打开HTML5的整体结构. 二.十分常用的快捷键: Ctrl + P,打开搜索框.具体操作为:1.输入当前项目中的文件名,快速搜索文件,2.输入@和关键字,查找文件中函数名,3.输入:和数字,跳转到文件中该行代码,4.输入#和关键字,查找

关于python脚本头部设置#!/usr/bin/python

今天又是贼几把菜的一天0.0 读别人程序的时候看到在python文件头部设置签名,感觉贼几把酷,自己也试着在文件前段设置了一下. 设置还是蛮简单的,设置过程如图所示. 设置后如图所示: 当然你也可能看到有的人在文件头部添加如下语句,但是你并不知道什么意思,只是感觉很酷. #!/usr/bin/python #!/usr/bin/env python 首先需要说明:这句代码在unix类的操作系统才有意义!这句代码在unix类的操作系统才有意义!这句代码在unix类的操作系统才有意义! 这句话的目的

meta 详解,html5 meta 标签日常设置

<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> <head> <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome --&g

html5响应式设置&lt;meta&gt;

1 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--放大页面到设备合适的分辨率--> 若不支持,请使用兼容ie的js 1 <!--[if lt IE 9]> 2 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaq

Html5 meta 笔记

摘抄:原文地址:http://www.kmapk.com/html/help/02/127.html 一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=devi