前端坑--meta标记篇

通用类:

声明编码

<meta charset=‘utf-8‘ />

页面关键词

<meta name="keywords" content="your tags" />

页面描述

<meta name="description" content="150 words" />

页面重定向和刷新

content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。

<meta http-equiv="refresh" content="0;url=" />

移动端类:

viewport

禁用不必要的自动缩放,优化移动浏览器显示

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

忽略识别为电话号码 和 邮箱

防止HTML有改变而导致可能的部分JS执行错误

<meta name="format-detection" content="telephone=no" /><!--禁止自动识别为电话号码链接,主要为苹果-->
<meta name="format-detection" content="email=no" /><!--禁止自动识别邮箱,主要为安卓-->

其它一些移动端实用META

<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

全屏模式(苹果)这个似乎有些没起作用

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

添加到主屏后的标题(苹果)

<meta name="apple-mobile-web-app-title" content="标题">

站点适配:主要用于PC-手机页的对应关系。

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;
url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。
 -->

避免百度转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

PC端:

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

国内双核浏览器选择内核

<meta name="renderer" content="webkit"><!--使用极速核-->
<meta name="renderer" content="ie-comp"> <!--使用IE兼容核-->
<meta name="renderer" content="ie-stand"><!--使用IE标准核-->

注:本文大部分转自“菜鸟笔记”,原文链接http://www.runoob.com/w3cnote/meta.html

时间: 2024-10-13 23:11:10

前端坑--meta标记篇的相关文章

web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知,不问自晓,古今行事,未之有也 」 我们都知道如今流行的框架:Vue.Js.AngularJs.ReactJs.已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种. 在了解MVVM之前,我们先回想一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回想历史.由于网上就可查不少资料,

web前端入坑第四篇:你还在用 jQuery?

web前端入坑第四篇:你还在用 jQuery? 大妈都这么努力,我们有几个人回家还看书的? 先来补齐[web前端入坑系列]前三篇的连接web前端入坑系列:点击标题进入第一篇: web 前端入坑第一篇:web前端到底是什么?有前途吗第二篇: web前端入坑第二篇:web前端到底怎么学?干货资料!第三篇:web前端入坑第三篇 | 一条"不归路" - 学习路线! 再说这个话题之前,我们先来扫盲普及一下 [jquery] 到底是什么以及它火爆将近十年的重要原因. [ 重新认识 - Jquery

移动前端工作的那些事---前端制作篇之meta标签篇

移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上代码进行说明: <!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title> <meta http-equiv="Content-ty

HTML学习日记之元信息meta标记

所谓meta标记就是用来描述一个HTML网页文档的属性,也称为元信息,这些信息并不会显示在浏览器的页面中,例如作者.日期和时间.网页描述.页面刷新等. 基本语法: <meta name = " "content=" "> <meta http-equiv=" " content = " "> name属性与content属性 name属性用于描述网页,它是以"名称/值"形式的名称,n

好程序员web前端分享HTML基础篇

好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基础 学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4.HTML基本结构和HTML语法 5.HTML常用标记 一.本专业介绍.HTML相关概念,HTML发展历史 本专业介绍 移动前端/WEB前端

前端深入之css篇|你真的了解“权重”吗?

原文:前端深入之css篇|你真的了解"权重"吗? 写在前面 权重这个概念,相信对许多进行过前端开发的小伙伴来说肯定并不陌生,有时候一个样式添加不上,我们就会一个 !important 怼上去,一切就好像迎刃而解了.但还有的时候,!important也并不能解决我们的问题,下面请跟随我来详细了解一下css的权重吧! 探索权重 指某一因素或指标相对于某一事物的重要程度,其不同于一般的比重,体现的不仅仅是某一因素或指标所占的百分比,强调的是因素或指标的相对重要程度,倾向于贡献度或重要性. 以

前端深入之css篇丨2020年前,彻底掌握css动画【transition】

原文:前端深入之css篇丨2020年前,彻底掌握css动画[transition] 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 话不多说,马上

前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画

原文:前端深入之css篇丨初探[transform],手把手带你实现1024程序员节动画 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 值此10

前端深入之css篇丨2020年前,彻底掌握css动画【animation】

原文:前端深入之css篇丨2020年前,彻底掌握css动画[animation] 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 上一篇文章我们已