meta标签的常见作用

meta的简介

meta标签在html文档的head标签中,但浏览器从服务端请求回html我能当后 meta不会显示在页面中,但是会告诉浏览器一些matedata(就是元数据:对数据描述的数据)meta标签中只能有name,http-equiv,content属性

meta的常见用作

设置编码

<meta charset ="utf-8"/>
<!--html5中新增(以下是html4中设置编码,响应头中也可设置)设置编码一般设置在第一行防止乱码-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

设置防止手机百度转码

其中http-equiv设置响应头的属性而对应的content是属性值

    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- 以上meta标签设置的是响应头的内容
    目的:为了不让手机百度对当前网页转码,避免发生问题或者添加广告-->

desription,keywords,title搜索引擎优化

    <meta name="description" content="不超过150个字符"/>
    <meta name="keywords" content="当前网站的关键字"/>
    <!--为了让写好的网页更易于让搜索引擎爬取到要在head标签中设置title
    meta标签-->

    <meta name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的Hacker News..."/>
    <meta name="keywords" content="当前网站的关键字"/>
    <title>掘金-juejin.im-一个帮助开发者成长的社区</title>
    <!--从上述代码和图片的对比中可以知道title与description在搜索引擎搜索结果后显示的对应位置了-->

设定浏览器默认渲染引擎

    <meta name="renderer" content="webkit"/>
    <!--一些国内浏览器一般会有两个渲染引擎通过这一设定指定默认的渲染引擎webkit-->
    

webkit内核 : chrome和safari浏览器的内核 ie-comp : ie兼容模式内核 ie-stand : ie标准模式内核

忽略手机自动识别手机号和邮箱

    <meta name="format-detection" content="telephone=no,email=no"

移动端适配

在说明移动端适配之前要明确一个概念viewport,将它称为视口,一共有三种视口: layoutviewport(布局视口) visualviewport(视觉视口) idealviewport(理想视口)

    <meta name="viewport" content="width=device-width,initial-scale=1,
    maximum-scale=1,minimum-scale=1,user-scale=no"

width : layoutviewport的宽度 initial-scale : 初始化时visualviewport相对于idealviewport的缩放 maximum-scale : 可手动缩放的最大值 minimum-scale : 可手动缩放的最小值 user-scale : 是否允许手动缩放

idealviewport

其中最好理解的就是idealviewport他就是等于设备的宽度,要了解其他视口之前要知道一个概念物理像素

物理像素

物理像素就是最小单位的像素点, 像iphone6的像素比是2 iphoneX的像素比是3 也就是说像这种像素比不为1的设备,他们展现的页面更细腻 这样一个设备独立像素是由好多个像素点组成例如iphone6它的像素比是2就是说一个正常的像素(就是pc端一个像素的大小)会有4个像素点在里面, 我们画一条1px的线在iphone6就会覆盖2行的像素点,iphonex就会覆盖3行

如何正常显示1px

现在大部分的手机的像素比不再是1了,也就是说当绘制了1px的边框后再initial-scale=1的情况下1px要占据多行物理像素

但是实际上想让不同设备上1px边框看起来都是占1行像素,就要 initial-scale=1/设备的像素比, 将像素比大于1的设备的视觉视口相对于理想视口缩小

rem适配

rem适配的原理是设置html的font-size值为页面宽度的1/10 分辨率为750的页面1rem=75px,所以可以结合dpr()

initial-scale确定

document.documentElement.clientWidth 一般继承了layoutviewport宽度而当meta标签的content中的width设为device-width时layoutviewport要由initial-scale决定了,是因为visualviewport的宽度由initial-scale决定进而影响了layoutviewport

设备宽为375px,浏览器默认visualviewport 980px

width	initial-scale	layoutviewport	visualviewport	idealviewport
---	---	980px	980px	375px
device-width	1	375px	375px	375px
device-width	n>1	375px	375/n px	375px
device-width	n<1	375/n px	375/n px	375px
480px	1	480px	375px	375px
300px	1	375px	375px	375px

某一个设备上显示页面时它的idealviewport已经确定,通过initial-scale确定visualviewport,根据width,idealviewport,visualviewport共同决定layoutviewport 通常取三个中的最大值所以一旦设置好了meta标签页面的宽度就确定了 initial-scale的值取决于设备的dpr

(function (baseFontSize) { const _baseFontSize = baseFontSize || 75; 
const ua = navigator.userAgent; 
const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i); 
const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
const dpr = window.devicePixelRatio || 1;
if (!isIos && !(matches && matches[1] > 534)) { 
// 如果非iOS, 非Android4.3以上, dpr设为1; dpr = 1; } 
const scale = 1 / dpr;


const metaEl = document.querySelector('meta[name="viewport"]');
if (!metaEl) { 
metaEl = document.createElement('meta'); 
metaEl.setAttribute('name', 'viewport'); window.document.head.appendChild(metaEl);
} 
metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale); 


document.documentElement.style.fontSize = document.documentElement.clientWidth / (750 / _baseFontSize) + 'px';
})();

//确定设备的dpr后设置meta标签的initial-scale和width确定//document.documentElement.clientWidth后就可以设置
//document.documentElement.style.fontSize