移动端开发注意事项

css 样式

• 禁止点击标签背景变暗

a,
button,
input,
optgroup,
select,
textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

• 输入框 placeholder 的颜色

  • 如果想要默认的颜色显示红色，代码如下：

  input::-webkit-input-placeholder {
    color: red;
  }
  

  • 如果想要用户点击变为蓝色，代码如下：

  input:focus::-webkit-input-placeholder {
    color: blue;
  }
  

• IOS 手机下清除输入框内阴影

input,
textarea {
  -webkit-appearance: none;
}

• 去除 inline-block 元素之间的间距，-webkit-text-size-adjust:none;去掉 Chrome 默认最小字体限制

.wrap {
  font-size: 0;
  -webkit-text-size-adjust: none;
}

meta 作用说明

• 页面窗口自动调整到设备宽度，禁止缩放

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

• width=device-width - 控制 viewport 的大小
• device-width 为设备的宽度
• initial-scale - 初始的缩放比例
• minimum-scale - 允许用户缩放到的最小比例
• maximum-scale - 允许用户缩放到的最大比例
• user-scalable - 用户是否可以手动缩放

• 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对 ios 的 safari

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

• 将网站添加到主屏幕快速启动方式，仅针对 ios 的 safari 顶端状态条的样式

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

• 忽略将页面中的数字识别为电话号码

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

• 网站图标

<link rel="shortcut icon" href="/favicon.ico" />