2025-04-12

meta配置

# 适配 App（重要）viewport-fit=cover

<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

方案 2. 顶部固定定位，

.topHeader{
    position: fixed;  //不能使用： sticky；在ios下下拉会跟着移动
    top:0;
    left:0;
    right:0;
    padding-top:20px;  //这个很重要正常值20px；齐刘海44px
}

# 媒体查询

  //也可以针对不同的媒体使用不同的stylesheets:
    <link rel="stylesheet" media="mediatype and not only (media feature)" href"mystylesheet.css">

    <link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">

   <!--上面将浏览器宽度小于等于80px时，应用 styleA 。-->

# nginx 不缓存

 <meta name="Cache-Control" content="no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" />

# 主应用在加载的过程中经常出现加载失败的问题。因为 https 地址中，如果加载了 http 资源，浏览器将认为这是不安全的资源，将会默认阻止。后来在文档中添加了

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

# 用于设置浏览器的过期时间, 其实就是响应头中的 expires 属性。

<meta http-equiv="expires" content="31 Dec 2021">

# 该种设定表示 5 秒自动刷新并且跳转到指定的网页。如果不设置 url 的值那么浏览器则刷新本网页。

<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com">

# 禁止浏览器从本地计算机的缓存中访问页面的内容

<meta http-equiv="pragma" content="no-cache">

# 设置开发作者

<meta name="author" content="zouyu">

# 告诉搜索引擎机器人抓取哪些页面，all / none / index / noindex / follow / nofollow。

<meta name="robots" content="all">

# 忽略自动识别电话

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

# 忽略自动识别邮箱

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

# 忽略自动识别电话和邮箱

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

# meta 针对其他浏览器配置

<!--搜索引擎抓取-->
<meta name="robots" content="index,follow"/>

<!--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">

<!--windows phone 点击无高光-->
<meta name="msapplication-tap-highlight" content="no">

<!--iOS 设备 添加到主屏后的标题（iOS 6 新增）-->
<meta name="apple-mobile-web-app-title" content="标题">

# meta 针对 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">

# 安全策略的设置告警

# a 链接

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

<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>

<!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>

# 键盘

<!-- 纯数字带#和* -->
<input type="tel">

<!-- 纯数字 -->
<input type="number" pattern="\d*">

<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">

# 唤醒原生应用

通过 location.href 与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为 URL Scheme，其基本格式为 scheme://[path][?query]，笔者曾经发表过《H5 与 App 的通讯方式》讲述 URL Scheme 的使用。

scheme：应用标识，表示应用在系统里的唯一标识 path：应用行为，表示应用某个页面或功能 query：应用参数，表示应用页面或应用功能所需的条件参数 URL Scheme 一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为 URL Scheme 是一种潜在的危险行为而禁用它，像 Safari 和微信浏览器。还好微信浏览器可开启白名单让 URL Scheme 有效。

<!-- 打开微信 -->
<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 无效

<body ontouchstart></body>

# 监听屏幕旋转

/* 竖屏 */
@media all and (orientation: portrait) {
    /* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
    /* 自定义样式 */
}

# ios 滚动卡顿解决

body {
    -webkit-overflow-scrolling: touch;
}

# 禁止滚动传播

.elem {
    overscroll-behavior: contain;
}

# 禁止长按操作

.className {
    /* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
    user-select: none; /* 禁止长按选择文字 */
    -webkit-touch-callout: none;
}

上次更新: 2025-12-04