Meta标签以及viewport

时间：2022-09-01 07:38:57

meta是meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。

name属性主要作用：对应网页内容，以便于搜索引擎机器人查找、分类，其中最常用的是description和keywords；浏览器厂商定义的meta值，譬如ios的诸多属性移动端页面必带的viewport。

http-equiv属性主要作用：用来在HTML文档中模拟HTTP协议的响应头，把 content 属性关联到 HTTP 头部。

http-equiv属性

http-equiv 属性可以使用伪装 HTTP 响应头部信息，可以伪装成 HTTP 响应头部信息。js可以通过 httpEquiv 返回和设置http-equiv值。见到次数最多的http-equiv肯定是下面这句：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

html5中简化成如下代码：

<meta charset="utf-8">

http-equiv属性还有以下属性：

  • Content-Language

    设置网页语言

    <meta  http-equiv="content-Language" contect="zh-CN">
  • Refresh：

    指定的时间刷新页面

    <meta http-equiv="refresh" content="300">

  • set-cookie：
    设定页面cookie过期时间，操作cookie跟js操作cookie类似

    <meta http-equiv="set-cookie" contect="cookievalue=xxx; expires=Wed, 12 Dec 2012 12:12:12 GMT; path=/">
  • last-modified：页面的最后生成时间
  • location：重定向到另一个网址
  • window-target：指定了这个属性的iframe，会在加载这个iframe的页面窗口打开。
  • date：指定页面创建的日期。
  • Pragma：设置是否缓存网页
  • Expires：

    设定网页Cache过期时间

    <meta http-equiv="expires" contect="Wed, 12 Dec 2012 12:12:12 GMT">
  • cache-control：设置文档的缓存机制。值如下：
    1. public：浏览器和缓存服务器都可以缓存页面信息
    2. private：只缓存在浏览器端
    3. no-cache：浏览器和缓存服务器都不应该缓存页面信息
    4. no-store：请求和响应的信息都不应该被存储在对方的磁盘系统中

PHP设置防止一次发送多个报头：

php代码

<?php

// Date in the past

header("Pragma: no-cache");

header("Cache-Control: no-cache");

header("Expires: Wed, 12 Dec 2012 12:12:12 GMT");

?>

以上php代码输出的HTML代码

<meta http-equiv="Pragma" contect="no-cache">

<meta http-equiv="cache-control" contect="no-cache">

<meta http-equiv="expires" contect="Wed, 12 Dec 2012 12:12:12 GMT">

如果直接在页面上写php输出的html代码，则可能不会有效果，因为只有少数浏览器支持以上属性。

name属性

name 属性提供了名称/值对中的名称，可以自定义，所以搜索引擎商以及浏览器厂商都有针对自家浏览器定义的name属性。

IOS相关

  • apple-touch-icon：

    创建桌面图标和启动画面，在meta标签中指定它的值可以使得你的网页在保存至主屏时，显示为自定义的icon，而不是网页的缩略图。

    <link rel="apple-touch-icon" href="/custom_icon.png"/>
    
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
    
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
    
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
  • apple-touch-startup-image:

    给网页声明启动画面，类似原生app。但是被声明的图片对于iphone和itouch 大小只能是 320 x 460 ，其他大小的都无效。但是同样你可以通过sizes 来进行多设备适配。

    <y;link rel="apple-touch-startup-image" href="/startup.png">
    
//for iphone Retina Display high
    
<y;link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
    
//for iPad Landscape
    
<y;link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
    
//for iPad Portrait
    
<y;link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

    PS：ios2.1以上支持

  • apple-mobile-web-app-title 

    添加到主屏时的标题

    <y;meta name="apple-mobile-web-app-title" content="标题">
  • apple-mobile-web-app-status-bar-style

    隐藏状态栏，default 为默认参数

    <y;meta name="apple-mobile-web-app-status-bar-style" content="black" />

    PS：ios2.1以上支持

  • apple-mobile-web-app-capable

    设置一个web应用程序是否在全屏模式下运行。

    <y;meta name="apple-mobile-web-app-capable" content="yes" />

    PS：ios2.1以上支持

  • format-detection

    忽略将页面中的数字识别为电话号码

    <meta name="format-detection" content="telephone=no"  />

    PS：ios1.0以上支持

viewport

觉得此属性是移动开发最重要的，所以自成一章。viewport 属性视能告诉浏览器如何规范的渲染网页。

  • width：viewport 的宽度（范围从223 到10,000）
  • height：viewport 的高度（范围从223 到10,000）
  • initial-scale：初始的缩放比例（范围从>0 到10）
  • minimum-scale：允许用户缩放到的最小比例（范围从>0 到10）
  • maxnim-scale：允许用户缩放到的最大比例（范围从>0 到10）
  • user-scalable：用户是否可以手动缩 (no,yes)
  • minimal-ui：ios 7.1新增页面加载时可以最小化上下状态栏

PS：如在移动端如下设置 <meta name="viewport" content="width=320;initial-scale=1.0;">则是告诉了浏览器网页在320px下显示是最合适的，那么移动端浏览器则会在设备宽内显示320px的内容，在移动端上320px代表的是设备宽度所能容纳的像素数而不是实际宽度

window8

  • msapplication-TileColor:

    设置Windows 8 磁贴颜色

    <meta name="msapplication-TileColor" content="#ff0"/>
  • msapplication-TileImage:

    设置Windows 8 磁贴图标

    <meta name="msapplication-TileImage" content="icon.png"/>

搜索引擎相关

  • date：

    定义网页生成时间

    <meta name="date" content="2008-07-12T20:50:30+00:00" />
  • keywords：

    定义网页关键词

    <meta name="keywords" content="HTML js css" />
  • description：

    定义网页简短描述

    <meta name="description" content="语义,各平台提供兼容性,提高用户浏览速度,优化产品的交互,提供可扩展的接口" />
  • author：

    定义网页作者

    <meta name="author" content="http://html5jscss.com/" />
  • copyright：

    定义网页版权

    <meta name="copyright" content="© http://www.dreamdu.com" />
  • robots

    定义网页搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

    <meta name="robots" content="robotterms" />

    针对谷歌GOOGLEBOT使用robots，针对百度baiduspider使用robots

其他

  • 以及360首创的浏览器内核控制 
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
  • 强制使用浏览器的最高版本模式进行渲染 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

    这个 meta 标签主要是避免用户安装了IE9，但浏览器却以IE7模式进行渲染的问题。

 

Meta标签以及viewport的更多相关文章

  1. HTML5开发之meta标签的viewport使用说明

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而每一款手机有不同的分辨率,不同屏幕大 ...

  2. HTML Meta标签中的viewport属性含义及设置

    两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移 ...

  3. meta标签补充属性&lpar;viewport&rpar;

    我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中: <meta name="viewport" content="widt ...

  4. 关于meta标签的name&equals;&quot&semi;viewport&quot&semi; 概述

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...

  5. meta标签viewport的深入理解（转）

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  6. 使用视 meta 标签来控制手机浏览器布局

    移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...

  7. &lbrack;转载&rsqb;移动页面所需meta元素和Viewport窗口知识点

    Meta标签 vs  Viewport http://www.2cto.com/kf/201409/335779.html http://blog.csdn.net/freshlover/articl ...

  8. Meta标签中的viewport属性及含义

    一.什么是Viewport 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个 ...

  9. &lbrack;转&rsqb;手机web HTML头信息解释和viewport meta标签解释

    <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...

随机推荐

  1. 关于history&period;js的使用

    项目地址: https://github.com/browserstate/history.js 做wap端的时候,有些时候一个页面里有很多小页面或者标签,希望刷新浏览器或者按返回键的时候,能够被当成 ...

  2. &lbrack;SQL&rsqb;复制数据库某一个表到另一个数据库中

    SQL:复制数据库某一个表到另一个数据库中 SELECT * INTO 表1 FROM 表2 --复制表2如果只复制结构而不复制内容或只复制某一列只要加WHERE条件就好了 例子:SELECT * I ...

  3. 我的android学习经历

    我为什么选择android? 我基本上前一年的时间都是在学习java的语法和线程之类的,没有注意java的分类,所以到现在慢慢接触到深处的时候我了解到,java的优势主要在web,而我不是特别喜欢网页 ...

  4. 动手学习TCP：服务端状态变迁

    上一篇文章介绍了TCP状态机,并且通过实验了解了TCP客户端正常的状态变迁过程. 那么,本篇文章就一起看看TCP服务端的正常状态变迁过程 服务端状态变迁 根据上一篇文章中的TCP状态变迁图,可以得到服 ...

  5. 一道题看bitset应用 --ZOJ 3642

    题意:给n个文件,包括文件名和文件大小,然后给出k个关键词,查询包含该关键词的文件的大小总和.文件名为一些中括号括起的关键词的合集. 解法:可用bitset记录每一个关键词在哪些文件中出现,然后查询即 ...

  6. SQL正常工作日上班安排

    alter proc [work] as declare @i int begin id into #restdate from dt_work where work_date in (select ...

  7. Java 简单算法--打印乘法口诀（只使用一次循环）

    package cn.magicdu.algorithm; /** * 九九乘法口诀表 * * @author xiaoduc * */ public class NineNineMulitTable ...

  8. Keil C51内存分配与优化

    C51的内存分配不同于一般的PC,内存空间有限,采用覆盖和共享技术.在Keil编译器中,经过编译后,会形成一个M51文件,在其内部可以详细的看到内存的分配情况. C51内存常见的两个误区: A.变量超 ...

  9. 设置Android设备在睡眠期间始终保持WLAN开启的代码实现

    MainActivity例如以下: package cc.ab; import android.os.Bundle; import android.provider.Settings; import ...

  10. jenkins&plus;ant&plus;jmeter html报告文件作为附件发送（ant-jmeter支持javamail）

    前言:由于ant-jmeter目前的版本不支持javamail,也就是说发送邮件时只能借助jenkins自带的发送邮件插件来发送报告. 但是jenkins发送邮件支持发送邮件内容(且有价值.有营养的内 ...

相关文章