meta总结 - beidan-html教程-PHP中文网

meta总结 - beidan

php中文网

发布： 2016-05-22 17:19:53

原创

1743人浏览过

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

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content </span><span style="color: #0000ff;">= "webkit"</span><span style="color: #0000ff;">/></span>

登录后复制

竟然一行代码“功力这么强大”，真是有必要认真学习了解一下常用的head头标签了。

首先，总结一下浏览器默认的内核模式：

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

1.搜索引擎（SEO优化）

页面关键字

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="技术"</span><span style="color: #0000ff;">></span>

登录后复制

页面描述

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content </span><span style="color: #0000ff;">= "搜索相关课程"</span><span style="color: #0000ff;">></span>

登录后复制

2.移动设备

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>

登录后复制

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

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name </span><span style="color: #0000ff;">= "viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width,user-scalable=no"</span><span style="color: #0000ff;">></span>

登录后复制

device-width 为设备的宽度
user-scalable 用户调整缩放，yes为允许用户对其缩放，反之为no，若设置为no，minimum-scale和maximum-scale都将被忽略，因为根本不可以缩放。
initial-scale：初始的缩放比例（范围从>0 到10）

3.声明编码

4.内核设置

优先使用IE最新版本和Chrome

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

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content </span><span style="color: #0000ff;">= "webkit | ie-comp| ie-stand"</span><span style="color: #0000ff;">/></span>

登录后复制

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

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

5.缓存设置

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

6.手机端常用设置

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

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"</span> <span style="color: #0000ff;">/></span>

登录后复制

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

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="format-detection"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="telephone=no"</span> <span style="color: #0000ff;">/></span>

登录后复制

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

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="format-detection"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="email=no"</span> <span style="color: #0000ff;">/></span>

登录后复制