移动端手机web前端meta通用设置

Posted 2023-04-02

参考技术A 手机版页面通常需要设置mate标签，来实现禁止缩放等效果。

<!--页面字符编码--><meta charset="utf-8">

<!--避免IE使用兼容模式--><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

<!-- 启用360浏览器的极速模式(webkit)--><meta name="renderer"content="webkit">

<!--微软的老式浏览器--><meta name="MobileOptimized"content="320">

<!--关键字描述--><meta name="keywords"content=""><meta name="description"content="">

<!--设置移动端视图--><meta name="viewport"content="width=device-width, initial-scale=1, user-scalable=no"/>

<!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓--><meta name="HandheldFriendly"content="true">

<!--删除苹果默认的工具栏和菜单栏--><meta name="apple-mobile-web-app-capable"content="yes"/>

<!--设置苹果工具栏颜色--><meta name="apple-mobile-web-app-status-bar-style"content="black"/>

<!--忽略页面中的数字识别为电话，忽略email识别--><meta name="format-detection"content="telphone=no, email=no"/>

<!--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">

手机H5移动端WEB资源整合之meta标签

一、相关网站使用meta的实例

youku首页的Meta设置：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

腾讯网首页的Meta设置：

<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="新闻 新闻中心 事实派 新闻频道,时事报道">
<meta name="description" content="腾讯新闻，事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
<meta name="author" content="skeetershi" />

二、meta的基础知识

定义：meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

分类：meta标签可分为两大部分：http-equiv和name变量。

1、http-equiv

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

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

PS：谷歌添加一个插件：Google Chrome Frame（谷歌内嵌浏览器框架GCF），这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

<meta http-equiv="content-Type" content="text/html; charset=utf-8">

说明：设定页面使用的字符集

content的内容为：

• GB2312时，代表说明网站是采用的编码是简体中文；
• ISO-8859-1时，代表说明网站是采用的编码是英文；
• UTF-8时，代表世界通用的语言编码；

PS：html5页面的做法是直接使用<meta charset="utf-8"/>

2、name

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

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

viewport的属性：

• width : viewport的宽度
• height : viewport的高度（很少使用）
• initial-scale : 初始的缩放比例
• minimum-scale : 允许用户缩放到的最小比例
• maximum-scale : 允许用户缩放到的最大比例
• user-scalable : 用户是否可以手动缩放
• target-densitydpi = device-dpi" （android才生效）：设备的密度等级

<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">  

说明：H5页面窗口宽度为720px(根据设计图稿的尺寸来决定)，并禁止用户缩放页面。target-densitydpi针对android手机，其实就是充当缩放的功能。

target-densitydpi取值：可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。

当你设target-densitydpi = device-dpi时：

   华为荣耀xx可视区宽度 =  设备宽度 * dpi比值  = 360 * (160/160) = 360

   小米1可视区宽度 =  设备宽度 * dpi比值  = 320 * (240/160) = 480

   联想乐檬可视区宽度 =  设备宽度 * dpi比值  = 360 * (320/160)= 720

   魅蓝可视区宽度 =  设备宽度 * dpi比值  = 432 * (400/160) = 1080

PS：根据上面的结论，我强烈建议不要使用 target-densitydpi = device-dpi， 因为不同设备上最终的可视区的宽度差异很大，除非你的app有为之做处理（rem、em的相对单位写法）。

<meta content="yes" name="apple-mobile-web-app-capable">

说明：是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 。

<meta content="black" name="apple-mobile-web-app-status-bar-style">

说明：设置苹果工具栏颜色。

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

说明：忽略页面中的数字识别为电话，忽略email识别。

<meta name="screen-orientation" content="portrait">

说明：uc强制竖屏

<meta name="full-screen" content="yes">

说明：UC强制全屏

<meta name="x5-orientation" content="portrait">

说明：QQ强制竖屏

<meta name="x5-fullscreen" content="true">

说明：QQ强制全屏

<meta name="author" content="dashen" />

说明：标注网页的作者

<meta name="keywords" content="新闻,新闻中心, 新闻频道">

说明：页面关键词，用于被搜索引擎收录

<meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">

说明：页面描述，用于搜索引擎收录

<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式

说明：指定双核浏览器默认以何种方式渲染页面。PS：360浏览器支持