2024年最新移动端 webapp meta小结(1)，总结2024年180道前端岗面试题

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级：

meta tag > http header

meta tag  > http header

常用的例子：

<meta http-equiv=“X-UA-Compatible” content=“IE=7”>

#以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv=“X-UA-Compatible” content=“IE=8”>

#以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

#以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

<meta http-equiv=“X-UA-Compatible” content=“IE=7,IE=9”>

<meta http-equiv=“X-UA-Compatible” content=“IE=7,9”>

<meta http-equiv=“X-UA-Compatible” content=“IE=Edge,chrome=1”>

#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.

<meta http-equiv = "X-UA-Compatible" content = "IE=7" >    #以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。   <meta http-equiv = "X-UA-Compatible" content = "IE=8" >    #以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。   <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >    #以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。   <meta http-equiv = "X-UA-Compatible" content = "IE=7,IE=9" >    <meta http-equiv = "X-UA-Compatible" content = "IE=7,9" >    <meta http-equiv = "X-UA-Compatible" content = "IE=Edge,chrome=1" > # 以上代码IE  = edge告诉IE使用最新的引擎渲染网页，chrome  = 1则可以激活Chrome Frame  .

3、 

apple-mobile-web-app-capable ：这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

apple-touch-fullscreen：添加到主屏幕后，全屏显示。

“apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式

（默认样）

4、

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=“adress=no”

也可以连写：meta name=“format-detection” content=“telephone=no,email=no,adress=no”

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

一、telephone

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

telephone=no就禁止了把数字转化为拨号链接！

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

二、email

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

email=no禁止作为邮箱地址！

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

三、adress

adress=no禁止跳转至地图！

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

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：