移动端适配

META 相关

1.添加到主屏后的标题（ios）

  1. <meta name="apple-mobile-web-app-title" content="标题"></meta>

2.启用 WebApp 全屏模式（ios）
当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）

  1. <meta name="apple-mobile-web-app-capable" content="yes"></meta>
  2. <meta name="apple-touch-fullscreen" content="yes"></meta>

3.百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面上贴它的广告。我们可以通过meta标签禁止它

  1. <meta http-equiv="Cache-Control" content="no-siteapp"></meta>

4.设置状态栏的背景颜色（ios）
只有在 name=”apple-mobile-web-app-capable” content=”yes” 时生效。

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

content 参数：

  • default 状态栏背景是白色
  • black 状态栏背景是黑色
  • black-translucent 状态栏背景是半透明
    • 如果设置为default或black，网页内容从状态栏底部开始
    • 如果设置为black-translucent，网页内容充满整个屏幕，顶部会被状态栏遮挡

5.移动端手机号识别（ios）

在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处 理为电话链接，比如：

  • 7 位数字，形如：1234567
  • 带括号及加号的数字，形如：(+86)123456789
  • 双连接线的数字，形如：00-00-00111

  • 11 位数字，形如：13800138000

  • 关闭电话号码的自动识别

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

  • 开启电话功能

    1. <a href="tel:123456">123456</a>

  • 开启短信功能

    1. <a href="sms:123456">123456</a>

file:///C:/Users/lenovo/Desktop/%E4%BD%A0%E7%9F%A5%E9%81%93%E5%85%B3%E4%BA%8E%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E7%9A%84%E6%8A%80%E5%B7%A7%E6%9C%89%E5%93%AA%E4%BA%9B.pdf