结构

HTML / HTML5

模版、移动端能力、Safari / 浏览器兼容相关片段。 — 共 34 条

共 34 条代码片段

A. 模版类

标准模版

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Title</title>
    <meta name="Keywords" content="Keywords" />
    <meta name="Description" content="Description" />
    <link rel="stylesheet" href="../css/xxx.css" />
  </head>
  <body>
    ...
  </body>
</html>

5 秒后自动刷新/跳转页面

<meta http-equiv="Refresh" content="5; URL=page2.html" />

1 分钟刷新页面

<meta http-equiv="Refresh" content="60" />

DNS 预解析

<link rel="dns-prefetch" href="//mingsixue.com" />

禁止页面缓存

<meta http-equiv="Cache-Control" content="no-cache" />

B. 移动端

拨打电话

<a href="tel:10086">拨打电话给 10086</a>

发送短信

<a href="sms:10086">发送短信给 10086</a>

发送邮件

<a href="mailto:xxx@xxx.com">发送邮件</a>

选择照片或拍摄照片

<input type="file" accept="image/*" />

选择视频或拍摄视频

<input type="file" accept="video/*" />

多选文件

<input type="file" multiple />

忽略自动识别电话

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

忽略自动识别邮箱

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

忽略自动识别电话和邮箱

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

纯数字带 # 和 *,适合输入电话

<input type="tel" />

纯数字,适合输入验证码

<input pattern="\d*" />

禁止字母大写

<input autocapitalize="off" autocorrect="off" />

打开微信

<a href="weixin://">打开微信</a>

打开支付宝

<a href="alipays://">打开支付宝</a>

打开支付宝的扫一扫

<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>

打开支付宝的蚂蚁森林

<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

让 :active 有效,让 :hover 无效

有些元素的 :active 可能会无效,而 :hover 在点击后会一直处于点击状态。给 body 注册一个空的 touchstart 事件可将两种状态反转。

<body ontouchstart></body>

C. Safari 浏览器相关

设置 Safari 全屏(在 iOS7+ 无效)

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

改变 Safari 状态栏样式

可选 default / black / black-translucent,需在全屏模式下才有效。

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

添加页面启动占位图

<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)" />

保存网站到桌面时添加图标

<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg" />

保存网站到桌面时添加图标且清除默认光泽

<link rel="apple-touch-icon-precomposed" href="pig.jpg" />

D. 其他浏览器相关

强制 QQ 浏览器竖屏

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

强制 QQ 浏览器全屏

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

开启 QQ 浏览器应用模式

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

强制 UC 浏览器竖屏

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

强制 UC 浏览器全屏

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

开启 UC 浏览器应用模式

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

开启 360 浏览器极速模式

<meta name="renderer" content="webkit" />