移动web开发meta标签的使用

最新推荐文章于 2020-10-13 22:04:25 发布

原创最新推荐文章于 2020-10-13 22:04:25 发布 · 867 阅读

6 ·

CC 4.0 BY-SA版权

移动web 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了移动Web开发中meta标签的重要性和作用，重点讲解了viewport的设置，如device-width、initial-scale等，以及meta标签的name和http-equiv属性的各种参数，如Keywords、description、robots等，强调了合理使用meta标签对搜索引擎优化和用户体验的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、meta标签

html代码中最关键的就是meta标签设置，开发移动端页面首先一定要设置viewport （可视区域）

device-width - 设备的宽度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

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

其次是一些辅助优化功能，常用的有如下meta标签：

 <!--苹果手机：会删除默认的工具栏和菜单栏，网站开启对web APP程序的支持-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--苹果手机：在web APP应用状态条（屏幕顶部条）的颜色，默认值为default（白色），
    可以定为black（黑色）和black-translucent（灰色半透明）。
    -->
    <meta name="app-mobile-web-app-status-bar-style" content="black">
    <!--禁止自动识别电话号码和邮箱-->
    <meta name="format-detection" content="telephone=no,email=no">

下面延伸一下<meta>标签的作用

meta标签是元素可提供相关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。

meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能

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

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

也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。

name属性

主要有以下几种参数：

（1）Keywords（关键字）

说明：keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量

举例：

<meta name ="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">

（2）description（网站内容描述）

说明：description用来告诉搜索引擎你的网站主要内容。

网站内容描述（description）的设计要点：

①网页描述为自然语言而不是罗列关键词（与keywords设计正好相反）；

②通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息；

③网页描述中含有有效关键词；

④网页描述内容与网页标题内容，主题内容有高度相关性；

⑤网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息的最多字数（通常在100中文字之内，不同搜索引擎略有差异）。

举例：<meta name="description" content="This page isabout the meaning of science,education,culture.">

（3）robots（机器人向导）

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例：<meta name="robots"content="none">

（4）author（作者）
说明：标注网页的作者

http-equiv属性

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

（1）content-Type（显示字符集的设定）

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

用法：<meta http-equiv="content-Type"content="text/html; charset=gb2312">

（2）content-Language（当浏览者访问你的网页时，浏览器会自动识别并设置网页中的语言）

用法：<metahttp-equiv="Content-Language" content="zh-cn" />

（3）Expires（期限）

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

用法：<meta http-equiv="expires"content="Fri,12 Jan 2019 18:18:18 GMT">

注意：必须使用GMT的时间格式。

（4）Pragma(cache模式）

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

用法：<meta http-equiv="Pragma"content="no-cache">

注意：这样设定，访问者将无法脱机浏览。

（5）Refresh（刷新）

说明：自动刷新并转到新页面。

用法：<meta http-equiv="Refresh" content="2;URL">；（注意后面的分号，分别在秒数的前面和网址的后面，URL可为空）

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

（6）Set-Cookie(cookie设定）

说明：如果网页过期，那么存盘的cookie将被删除。

用法：<meta http-equiv="Set-Cookie"content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/">

注意：必须使用GMT的时间格式。

（7）Window-target（显示窗口的设定）

说明：强制页面在当前窗口以独立页面显示。

用法：<meta http-equiv="Window-target"content="_top">

注意：用来防止别人在框架里调用自己的页面。