我所了解的meta

时间：2024-06-13 17:03:26

https://github.com/hoosin/mobile-web-favorites

总况

meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）。

http-equiv 属性的 Content-Type 值（显示字符集的设定）

设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。

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

name 属性的 viewport 值（移动屏幕的缩放）

也就是可视区域。对于桌面浏览器，我们都很清楚 viewport 是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。

  • width – // viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
  • height – // viewport 的高度 （范围从 223 到 10,000 ）
  • initial-scale – // 初始的缩放比例 （范围从 > 0 到 10）
  • minimum-scale – // 允许用户缩放到的最小比例
  • maximum-scale – // 允许用户缩放到的最大比例
  • user-scalable – // 用户是否可以手动缩放 (no，yes)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

上面代码解释如下：

  • 强制让文档与设备的宽度保持 1:1 ；

  • 文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；

  • user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；

有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度

body {

    min-width: 320px;

}

name 属性的 format-detection 值（忽略页面中的数字识别为电话号码）

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

  • 使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。

  • 若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。

name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）

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

  • 网站开启对 web app 程序的支持。

  • 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。

name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
  • 在 web app 应用下状态条（屏幕顶部条）的颜色；
  • 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

name 属性设置作者姓名及联系方式

<meta name="author" contect="liudanyun, liudy1024@163.com" />

苹果 Web App 其他设置

配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径。

使用：

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。

  • 图片尺寸可以设定为 57*57（px）或者 Retina 可以定为 114*114（px），iPad 尺寸为 72*72（px）

<link rel="apple-touch-startup-image" href="logo_startup.png" />

说明：这个 link 就是设置启动时候的界面。

使用：

  • 放置的路径和上面一样。

  • 官方规定启动界面的尺寸必须为 320*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。

常用meta说明

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

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

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

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

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。

其中：

  • width - viewport的宽度
  • height - viewport的高度
  • initial-scale - 初始的缩放比例
  • minimum-scale - 允许用户缩放到的最小比例
  • maximum-scale - 允许用户缩放到的最大比例
  • user-scalable - 用户是否可以手动缩放 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

页面描述

<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />

这个属性是当用户把连接保存到手机桌面时使用的图标，如果不设置，则会用网页的截图。有了这，就可以让你的网页像APP一样存在手机里了

<link rel="apple-touch-startup-image" href="/img/startup.png" />

这个是APP启动画面图片，用途和上面的类似，如果不设置，启动画面就是白屏，图片像素就是手机全屏的像素

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

这个描述是表示打开的web app的最上面的时间、信号栏是黑色的，当然也可以设置其它参数，详细参数说明在：Supported Meta Tags

<meta name="apple-touch-fullscreen" content="yes" />

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

这2个描述也很有用的，如果没有它，你的web app会用safari浏览器打开，有了它，就会用独立进程的无地址栏的打开，完全可以和普通的APP比拟了

下面还有个不错的css，是用来区分视网膜屏幕的，这样你可以在iphone这样的手机里载入2x的图片，就不会模糊了

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi)

{

#logo{background-image: url(logo@2x.png);}

}

样式表

<link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片

<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式样式

<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"   // 风景模式样式

//竖屏时使用的样式

<style media="all and (orientation:portrait)" type="text/css">

#landscape { display: none; }

</style>

//横屏时使用的样式

<style media="all and (orientation:landscape)" type="text/css">

#portrait { display: none; }

</style>

相关文章