web移动端开发总结

最近在搞移动端webapp开发,工作中遇到了一些问题,记录下一些解决方案,记录下来,以便后用。

meta标签

移动端页面设置视口宽度等于设备宽度,并禁止缩放

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面。

1
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

禁止将页面中的数字识别为电话号码

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

忽略 Android 平台对邮箱地址的识别

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

css样式技巧

静止 ios 和 Android 用户选中文字

1
2
3
.body{
-webkit-user-select: none;
}

禁止 ios 长按时触发系统的菜单,禁止 ios&android 长按时下载图片

1
2
3
.body{
-webkit-touch-callout: none;
}

webkit 内核去除表单元素的默认样式

1
2
3
input,button{
-webkit-appearance: none;
}

修改 webkit 内核下表单输入框 placeholder 的样式

1
2
3
4
5
6
input::-webkit-input-placeholder{
color: #aaa;
}
input:focus::-webkit-input-placeholder{
color: #eee;
}

去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景

1
2
3
a,button,input{
-webkit-top-higlight-color: rgba(255,0,0,0);
}

ios 禁止调整字体大小

1
2
3
body{
-webkit-text-size-adjust: 100%!important;
}

android 去掉语音输入按钮

1
2
3
input::-webkit-input-speech-button{
display: none;
}

移动端定义字体(移动端没有微软雅黑字体)

1
2
3
body{
font-family: Helvetica;
}

其他技巧

手机拍照和上传图片

1
2
3
4
<!-- 选择图片 -->
<input type="file" accept="image/*">
<!-- 选择视频 -->
<input type="file" accept="video/*">

取消 input 在 ios 下,输入的英文首字母默认大写

1
<input autocapitalize="off" autocorrect="off">

打电话和发短信

1
2
<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给:10086</a>