距离从 avepoint 离职加入本来生活网已经 8 个月了，工作内容也从偏向 JS & PC 部分，逐渐转向于移动端 m 站的开发，这里简单总结下移动开发的一些常用技巧

meta 标签的移动端相关内容

  • 设置移动端视口宽度，并且禁止缩放
1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  • 设置移动端视口宽度为定宽（以 640px 为例）
1
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  • 禁止将页面中的数字识别为电话号码
1
<meta name="format-detection" content="telephone=no" />
  • 忽略 android 平台对邮箱地址的识别
1
<meta name="format-detection" content="email=no" />
  • 当网站添加到主屏幕快速启动方式( 仅 IOS 7.0 版本之前的 safari 浏览器有效 )
1
<meta name="apple-mobile-web-app-capable" content="yes" />
  • 设置网站在 ios 操作系统下，屏幕快捷方式的 safari 顶端状态条的样式
1
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
  • 描述网页内容 （便于 SEO ）
1
<meta name="参数" content="具体的描述" />
  • 优先使用 IE 最高版本和 chrome
1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  • 禁止百度转码该软件
1
<meta http-equiv="Cache-Control" content="no-siteapp" />
  • 启用 webApp 的全屏模式
1
<meta name="apple-mobile-web-app-capable" content="yes" />

CSS 样式技巧

  • 禁止 ios 和 android 用户选中文字
1
.css{-webkit-user-select:none}
  • 禁止 ios 长按时触发系统菜单 ， 禁止 ios 和 android 系统长按图片时，下载该图片
1
.css{-webkit-touch-callout: none}
  • 修改 webkit 内核的浏览器，input 输入框 placeholder 的样式
1
2
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#AAAAAA;}
  • ios 下使用-webkit-text-size-adjust禁止调整字体大小
1
body{-webkit-text-size-adjust: 100%!important;}
  • android 上去掉语音输入按钮
1
input::-webkit-input-speech-button {display: none}
  • 去除点击 android 系统下<a> <button> <input> 标签时产生的边框，并且去除 ios 系统下点击 a 标签时产生的半透明灰色背景
1
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
  • 禁用Webkit内核浏览器的文字大小调整功能
1
-webkit-text-size-adjust: none;

标签相关样式技巧

  • 上传图片
1
<input type=file accept="image/*">
  • 上传视频
1
<input type=file accept="video/*">
  • 拨打电话
1
<a href="tel:10086">打电话给:10086</a>
  • 发送短信
1
<a href="sms:10086">发短信给: 10086</a>

小技巧暂时整理那么多，以后会继续更新