前端基础解析HTML页面-meta标签

meta标签：

标签位于文档的头部，且永远位于 head 元素内部，

元素可提供有关页面的元信息，

其属性定义了与文档相关联的名称/值对。

元数据总是以名称/值的形式被成对传递的。

把 content 属性关联到一个名称。

meta name="title" content="页面的标题 "/

meta name="keywords" content="页面的关键词 "/

meta name="description" content="描述的信息和内容 "/

author 作者

description 描述

keywords 关键词

generator 生成器 如“sublime、webstorm”

revised 修订版

others 其他

把 content 属性关联到 HTTP 头部。

meta http-equiv="Cache-Control" content="no-siteapp"

content-type

expires

refresh

set-cookie

定义用于翻译 content 属性值的格式。

scheme 属性用于指定要用来翻译属性值的方案。

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

viewport指 web 页面上用户的可见区域。

移动设备上默认的 viewport 大小都是 980px 。

width=device-width 是指这个设备最理想的 viewport 宽度，可以自适应设备宽度。

initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放。

user-scalable=0 是指禁止用户进行缩放。

maximum-scale=1.0 是指用户最大缩放大小是1

既可以设置width=device-width，也可以设置initial-scale=1，但有一个小缺陷，就是width=device-width会导致iphone、ipad横竖屏不分，initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。所以，最完美的写法两者都写上去， initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。

关于meta name="applicable-device"content="pc"

百度可以通过基本html特征来判断是否适合无线端浏览:

PC站:meta name="applicable-device" content="pc"手机站：meta name="applicable-device" content="mobile"/响应式网页可标识：meta name="applicable-device"content="pc,mobile"