H5移动端常用<meta>标签总结

最新推荐文章于 2024-07-19 10:57:26 发布

夏尔の

最新推荐文章于 2024-07-19 10:57:26 发布

阅读量1.5k

点赞数 1

分类专栏： HTML和CSS 文章标签： meta标签

本文链接：https://blog.csdn.net/qq_16371909/article/details/77962986

版权

HTML和CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

移动端常用的一些<meta>标签总结：

基本的：

<meta charset="utf-8" />
<!-- 1、如果支持Google Chrome Frame：GCF，则使用GCF渲染；2、如果系统安装ie8或以上版本，则使用最高版本ie渲染；3、否则，这个设定可以忽略。 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 对视窗缩放等级进行限制，使其适应移动端屏幕大小 -->
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
<!-- 当把这个网页添加到主屏幕时的标题（仅限IOS） -->
<meta name="apple-mobile-web-app-title" content="夏尔の博客">

其他的：

<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true" />
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true" >
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content= "no">