移动端浏览器常用的 meta 标签汇总

作者: 刘星
日期: 2021年12月09日

本文是 meta 标签系列的最后一篇文章。本系列共 4 篇:

前面几篇文章,我们都已经介绍过了meta标签的方方面面。本文将介绍移动端及浏览器的一些常用meta标签

响应式设计视口标签

viewport 是用户网页的可视区域。 viewport 通常用于设置页面的视口, 这个属性常用于设计移动端网页。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

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

它主要有以下属性值:

  • width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度
  • height:和 width 相对应,指定高度
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
  • maximum-scale:允许用户缩放到的最大比例
  • minimum-scale:允许用户缩放到的最小比例
  • user-scalable:用户是否可以手动缩放

关闭自动识别

在IOS中,你的网页里有一串数字,IOS会把他当成电话号码,点击会拨打电话。通过使用下面这个标签可以取消这一功能。

关闭电话自动识别:

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

如果同样也需要禁止自动识别邮箱,可以在原来的基础上增加"email=no"。

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

QQ 移动浏览器的一些设置

在指定方向上锁定屏幕(锁定横 / 竖屏)

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

全屏显示此页面

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

页面以"应用模式"显示

<meta name="x5-page-mode" content="app">

UC 移动浏览器的一些设置

在指定方向上锁定屏幕(锁定横 / 竖屏)

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

全屏显示页面

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

即使在"文本模式"下,UC 浏览器也会显示图片

<meta name="imagemode" content="force">

页面将以"应用模式"显示(全屏、禁止手势等)

<meta name="browsermode" content="application">

禁用 UC 浏览器的"夜间模式"

<meta name="nightmode" content="disable">

简化页面,减少数据传输

<meta name="layoutmode" content="fitscreen">

禁用的 UC 浏览器的功能,“当此页面中有较多文本时缩放字体”

<meta name="wap-font-scale" content="no">

设置 360 浏览器的渲染引擎

<!-- 选择渲染引擎 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

Apple iOS Safari 浏览器

添加到主屏幕

启动图标 (大于等于 180x180px)

<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

启动屏幕图片

<link rel="apple-touch-startup-image" href="/path/to/launch.png">

启动图标的标题

<meta name="apple-mobile-web-app-title" content="应用标题">

启用独立(全屏)模式, 删除苹果默认的工具栏和菜单栏

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

状态栏外观(除非启用独立模式,否则无效) 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)

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

Google Android

设置主题色

<meta name="theme-color" content="#E64545">

设置添加到主屏幕

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

Google Chrome

禁用翻译提示

<meta name="google" content="notranslate">

微软 IE 浏览器

强制 IE 8/9/10 使用其最新的渲染引擎

<meta http-equiv="x-ua-compatible" content="ie=edge">

通过 Skype Toolbar 浏览器扩展功能禁用自动检测和格式化可能的电话号码

<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

Windows 磁贴

<meta name="msapplication-config" content="/browserconfig.xml">

最低要求的的 browserconfig.xml 配置:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="small.png"/>
      <square150x150logo src="medium.png"/>
      <wide310x150logo src="wide.png"/>
      <square310x310logo src="large.png"/>
    </tile>
  </msapplication>
</browserconfig>

结语

以上介绍了一些在特定平台上,常用的meta标签。可用于简单的定义网页在浏览器及平台上的表现。

文档信息

版权声明:署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0)

原文链接:https://www.liuxing.io/blog/meta-tags-for-browsers-platforms/

发表日期:2021年12月09日


相关文章

最近更新