做项目的时候发现正常的代码在360浏览器上样式都是乱的，翻阅资料才发现360是双核，分为极速模式和兼容模式，极速模式是用webkit内核，兼容模式是用trident内核（也就是IE内核）,最后加了一行代码就完美解决了

 <meta name="renderer" content = "webkit"/>
竟然一行代码“功力这么强大”，真是有必要认真学习了解一下常用的head头标签了。
首先，总结一下浏览器默认的内核模式：

国内双核浏览器默认内核模式如下：
1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

1.搜索引擎 （SEO优化）

页面关键字

<meta name="keywords" content="技术">

页面描述

<meta name="description" content = "搜索相关课程">

2.移动设备

<meta name="viewport" content="">

设置屏幕宽度为设备宽度，禁止用户手动调整缩放

<meta name = "viewport" content="width=device-width,user-scalable=no">

  1. device-width   为设备的宽度

  2. user-scalable   用户调整缩放，yes为允许用户对其缩放，反之为no，若设置为no，minimum-scale和maximum-scale都将被忽略，因为根本不可以缩放。

  3. initial-scale：初始的缩放比例 （范围从>0 到10）

3.声明编码

<meta charset="utf-8"/>

<html lang="en">

4.内核设置

优先使用IE最新版本和Chrome

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

浏览器内核控制：（国内很多是双内核（webkit，trident）添加以下meta可以控制浏览器使用何种内核渲染）

<meta name="renderer" content = "webkit | ie-comp| ie-stand"/>

content的取值为 webkit   ie-comp  ie-stand, （是区分大小写的，使用的时候要注意）,分别代表webkit 内核，IE 兼容内核，IE 标准内核。

如：若页面需默认用极速核，增加标签：

<meta name="renderer" content="webkit">

5.缓存设置

禁止浏览器从本地计算机的缓存中访问页面内容：

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

6.手机端常用设置

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

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

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

忽略Android平台中对邮箱地址的识别

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

meta总结的更多相关文章

  1. 常用 meta 整理

    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...

  2. meta标签

    参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...

  3. Django模型类Meta元数据详解

    转自:https://my.oschina.net/liuyuantao/blog/751337 简介 使用内部的class Meta 定义模型的元数据,例如: from django.db impo ...

  4. H5 meta小结

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, ...

  5. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  6. 较为完整的meta

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 浏览器内核控制Meta标签说明文档【转】

    背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...

  8. HTML <meta> 标签，搜索引擎

    关于Mate标签的详尽解释,请查看w3school 网址为:http://www.w3school.com.cn/tags/tag_meta.asp meta标签作用 META标签是HTML标记HEA ...

  9. 内核控制Meta标签：让360浏览器默认使用极速模式打开网页(转)

    为了让网站页面不那么臃肿,也懒的理IE了,同时兼顾更多的国内双核浏览器,在网页页头中添加了下面两行Meta控制标签. 1,网页头部加入 <meta name="renderer&quo ...

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

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

随机推荐

  1. 跨域 XMLHttpRequest对象

    XMLHttpRequest对象是ajax编程的基础,用于发送请求(数据)与服务端进行交互. 目前主流浏览器都内置了XMLHttpRequest对象. 浏览器会使用XMLHttpRequest对象来创 ...

  2. 【C++ Primer | 08】IO库

    IO类 C++的输入输出分为三种: (1)基于控制台的I/O (2)基于文件的I/O (3)基于字符串的I/O istringstream类 描述:从流中提取数据,支持 >> 操作 这里字 ...

  3. 【Oracle】Linux7安装11g 86%报错：Error in invoking target 'agent nmhs' of makefile

    http://blog.itpub.net/29475508/viewspace-2120836/

  4. [转] Async/Await替代Promise的6个理由

    Node.js 7.6已经支持async/await了,如果你还没有试过,这篇博客将告诉你为什么要用它. Async/Await简介 对于从未听说过async/await的朋友,下面是简介: asyn ...

  5. HTML LIST 输入框自动查询追加框,自动过滤 HTML5

    <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp&q ...

  6. Codeforces Gym100543B 计算几何 凸包 线段树 二分/三分 卡常

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF-Gym100543B.html 题目传送门 - CF-Gym100543B 题意 给定一个折线图,对于每一条 ...

  7. BZOJ2084 [Poi2010]Antisymmetry Manachar

    题目传送门 - BZOJ2084 题解 对于一个0我们把它看作01,1看作10,然后只要原串中的某个子串可以通过这两个变换成为回文串就可以满足条件了. 对于转换过的串,Manachar随便弄几下就可以 ...

  8. Python中GIL

    GIL(global interpreter lock)全局解释器锁 python中GIL使得同一个时刻只有一个线程在一个cpu上执行,无法将多个线程映射到多个cpu上执行,但GIL并不会一直占有,它 ...

  9. LoadRunner脚本参数化之设置条件与运行结果说明

    性能测试中为什么需要进行参数化? 1.功能方面:首先要保证脚本的功能完善.可用性.(一般来说,参数化主要针对业务中的具备唯一性的数据.) 2.性能方面:一般来说,如果服务器存在缓存机制,在测试过程中, ...

  10. thinkphp5 Request请求类

    获取请求类的几种方式: 1.助手函数(严格不算ba ) input('post.name'): 2.$request=\think\Request::instance(); 3.控制器中必须继承Con ...