移动端常见问题(一)

移动端的开发由于设备的不统一会造成一些兼容性问题，经常会困扰许多web前端开发者，自从接触移动端以来也遇到过很多问题，低端机性能差容易卡顿，h5和css3新的api在低版本兼容性差等。

移动端常见的meta标签

<!-- 自适应屏幕大小 页面的宽度与设备的宽度保持一致，最大和最小缩放比例是1，且不允许用户点击屏幕放大 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- 优先使用最新版本 IE 和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 启用双核浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 禁止手机号码和邮箱自动识别 -->
<meta name="format-detection" content="telephone=no, email=no"/>
<!-- 启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!-- 不使用缓存 -->
<meta http-equiv="Cache-Control" content="no-cache" />

移动端常用的css技巧

/* 去除元素被触摸时产生的半透明灰色遮罩的高亮效果 */
*{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}
/* 禁止文字缩放 */
html {
  -webkit-text-size-adjust: 100%;
}
/* 清除输入框内阴影 清除按钮圆角  */
input,textarea,select {
  border: 0;
  -webkit-appearance: none;
  border-radius:0;
}
/* 移动端禁止选中内容 */
div {
  -webkit-user-select: none;  /* Chrome all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
}
/* 自定义placeholder的颜色 */
input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc;}
/* 清除浮动 */
.clearfix:before,.clearfix:after{content:"";display:table;clear:both;}
/* 单行文本省略 */
.ellipsis{
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	-webkit-text-overflow:ellipsis
}
/* 多行文本省略 */
.elli-two{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/*1px边框*/
.onepx {
  position: relative;
}
.onepx::before {
  content: '';
  display: block;
  width: 200%;
  height: 200%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events:none; /* 屏蔽鼠标事件 */
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
/* 上下拉动滚动条时卡顿、慢 */
body {
  -webkit-overflow-scrolling:touch;
  overflow-scrolling: touch;
}
/* iphone及ipad下输入框默认内阴影 */
input, select { -webkit-appearance:none; }
/* 滚动条美化 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
  width: 7px;
  height: 7px;
  background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  background-color: #c8c8c8;
}

其他

• 拨打电话 <a href="tel:15509271855"> 请拨打电话1550971855</a>
• 下载文件 <a href="../1.txt" download="文件名或重命名"> 下载txt文件</a>
• 发送邮件 <a href="mailto:tew@163.com"> 请拨打电话1550971855</a>
• 长按在移动端执行顺序 touchstart touchmove touchend mousemove mousedown mouseup click