背景

在一次H5 项目如何适配暗黑模式的文章里面看到 <meta name="color-scheme" content="light dark"> 作者写到了。声明当前页面支持 light 和 dark 两种模式，系统切换到深色模式时，浏览器默认样式也会切换到深色；第一次看到这样的写法，引起了我的好奇

meta 的name属性

meta 元素可用于提供名称-值对形式的文档元数据，name 属性为元数据条目提供名称，而 content 属性提供值。

name=”color-scheme” 适配模式

所以上面我看到的 name=”color-scheme” content=”light dark” 就有了合理的解释了。你的网页要做适配的黑暗模式，那就告诉浏览器

name=”viewport” 移动端缩放规则

做移动端项目的同学，这个应该是很熟悉吧，这样做是为了使移动端的页面在不同的手机上显示同样的大小来显示，我们可以将页面的宽度固定为设备的宽度，并固定不允许用户再重新缩放

所以就有了 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

当然我们在做移动端项目的时候为了保证不同手机下显示一样，也需要对字体做处理，一半都是在html 上面设置根字体的大小

html {
  font-size: 16px;
  font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 39), 22px);
}

@media screen and (max-width: 320px) {
  html {
    font-size: 14px;
  }
}

@supports not (width: clamp(1px, 2px, 3px)) {
  @media screen and (min-width: 375px) {
    html {
      font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
  }

  @media screen and (min-width: 414px) {
    html {
      font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
  }

  @media screen and (min-width: 1000px) {
    html {
      font-size: 22px;
    }
  }
}

就这样完美实现了移动端的布局，是不是很完美呀

了解CSS min()/max()/clamp()数学函数

name=”format-detection” 格式检测

它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：

meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="address=no" 
// 或者
meta name="format-detection" content="telephone=no,email=no,address=no"

下面具体说下每个设置的作用：

一、telephone

你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：

telephone=no就禁止了把数字转化为拨号链接！ telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！

二、email

告诉设备不识别邮箱，点击之后不自动发送

email=no禁止作为邮箱地址！ email=yes就开启了把文字默认为邮箱地址，这个meta就不用写了,在默认是情况下就是开启！

三、address

address=no禁止跳转至地图！ address=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！

SEO 搜索引擎优化相关

<meta name="keywords" content="这里是这个网页的关键字">
<meta name="description" content="这里是这个网页描述">

标准元数据名称

mate 的其他属性

在张老师的博客里面我发现了一个新的东西，很有意思，开心，又get到了新的知识，虽然不一定用到。但是都是一些基础知识，谁知道什么时候就用上了呢。我有一个同事XboxYan 他就是基础特别好，很多实现他都用到了一些我不知道但是真的很好用的知识。所以我也准备以后深耕基础领域了，加油，像大佬看起。

http-equiv=”refresh” 页面定时刷新

哇塞还有这种用法，刷新页面或者页面跳转，就是很简单的两行代码，小tip: 使用meta实现页面的定时刷新或跳转

这个表示当前页面每5秒钟刷一下，刷一下~

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

这个表示当前页面2秒后跳到首页~ <meta http-equiv="refresh" content="2; url='/'">

页面直接跳转到腾讯网~

<meta http-equiv="refresh" content="0; url='http://www.qq.com/'">

是不是很有意思，哈哈

sunseekers

mate 标签

背景