资讯专栏INFORMATION COLUMN

我从HTML的meta中学到了什么

rozbo / 2881人阅读

摘要:用于设置缩放比例,可以是任意数值的比例。禁止,不禁止是否就职浏览器识别页面中的邮件地址。具体可参考如下代码以前,我不知道或中添加有什么用,但上面的例子是它的一个用途。其他的使用可参考或模拟原生效果。更多的前端相关资源,可关注我的

meta

meta中有这样几个常用属性:http-equiv,name,content,包括html5新增的charset。

注意:content属性用来存储meta信息的内容,所有的主流浏览器都支持它,但它一般很少多带带使用,我们一般使用http-equiv或name来定义content属性信息(或值)的名称,http-equiv和name在一个meta中通常只能用其中一个。

现介绍常用的,再介绍一些其它的。

name常见的有:

application-name // 代表web应用程序的名字
author // 规定文档作者的名字
description // 对页面的描述,SEO需要用到
keywords // 页面的关键字词,多个用逗号隔开,SEO需要用到
编码格式
视窗宽度

width:用于设置视窗口的宽度,可以设置为device-width(设备的宽度),也可以是自定义的值。

initial-scale:用于设置缩放比例,可以是任意数值的比例。

minimum-scale:用于设置最小缩放比例。

maximum-scale:用于设置最大缩放比例。

user-scalable:用于设置是否禁止用户缩放页面。

自动识别

telphone:是否禁止浏览器识别页面中的电话号码。no:禁止,yes不禁止

eamil:是否就职浏览器识别页面中的邮件地址。no:禁止,yes不禁止

用http-equiv于模拟一个 HTTP 响应头

我们都知道,HTML4.0.1定义html文档的编码方式是如下面这样:

但是在HTML5中我们可以像下面这样定义:

那么它除了这样的使用场景外,还有别的一些吗。如果你强制刷新页面,可以驶入像下面这样的代码:

如上面的代码的意思是:强制浏览器每3秒刷新一次。但要慎用。

当然,还有一些其他的好用的效果,如果你想要给应用定义多套样式,然后根据用户选择来加载不同的样式,你可以将http-equiv设置为default-style,然后你设置content的值为link或style的对应值。具体可参考如下代码:



以前,我不知道style或link中添加title有什么用,但上面的例子是它的一个用途。

针对苹果设备的设置
// 下面代码来自天猫移动web
 // 可以让app运行于全屏模式
 // 可以让app的标题不同于页标题
 // 配置app的状态栏,可设置为default, black, 和 black-translucent。

状态栏设置,可参考Changing The iOS Status Bar Of Your Progressive Web App

当然,我们也可以设置书签或者快捷键的图标。可参考如下代码:

可以根据不同的型号设备,来设置不同的sizes。

也可以设置它的启动背景图。可参考如下代码:

当然,我们也可以设置其它的meta,用来控制不同浏览器的行为,也可以控制不同搜索引擎的行为。

其他meta的使用

可参考gethead meta 或 模拟原生IOS效果。

更多的前端相关资源,可关注我的github

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53385.html

相关文章

  • 我从 fabric.js 中学到了什么

    摘要:前言熟悉的朋友想必都使用或者听说过,算是一个元老级的库了,从第一个版本发布到现在,已经有年时间了。中缓存是默认开启的,同时也可以设置为禁用。处理屏屏幕模糊的问题,直接给出处理方法,就不展开说了。 前言 熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js,Fabric 算是一个元老级的 canvas 库了,从第一个版本发布到现在,已经有 8 年时间了。我近一年时间也在项目...

    oogh 评论0 收藏0
  • 「读懂源码系列2」我从 lodash 源码中学几个知识点

    摘要:今天要讲的,是我从的源码实现文件中学到的几个很基础,却又容易被忽略的知识点。在函数式编程中,函数是一等公民,它可以只是根据参数,做简单的组合操作,再作为别的函数的返回值。所以,阅读源码,是一种很棒的重温基础知识的方式。 showImg(https://segmentfault.com/img/bVbpTSY?w=750&h=422); 前言 上一篇文章 「前端面试题系列8」数组去重(1...

    Amio 评论0 收藏0
  • 新程序员最爱免费资源

    摘要:简评国外美女程序员推荐了她自己用过的一些免费资源,对新手比较友好的那种。原作者,是个美女程序员,以下这些资源都是她自己试过的。最后重申,这些是我自己使用过的资源,所以我很负责的可以告诉你,这些挺有用的。 简评:国外美女程序员推荐了她自己用过的一些免费资源,对新手比较友好的那种。 原作者 Ali Spittel,是个美女程序员,以下这些资源都是她自己试过的。以下「我」代表 Ali Spi...

    xorpay 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<