本文介绍了移动端开发中常见的问题及解决方案，包括禁止页面缩放、消除input框自动记忆功能、禁止用户选中文字、修改placeholder样式等。适用于希望提高用户体验的前端开发者。
关于移动端开发的一些基础设置问题
1.禁止页面缩放
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
2.input框消除自动记忆功能
<input type="text" autocomplete="off">
//input的autocomplete属性默认是on：其含义代表是否让浏览器自动记录之前输入的值
//off：则关闭记录
3.禁止用户选中文字
-webkit-user-select:none
4.placeholder元素样式的修改
input::-webkit-input-placeholder{color:red;} //input框提示的颜色
input:focus::-webkit-input-placeholder{color:green;} //聚焦时的提示的颜色
5.去除 button在 ios上的默认样式
-webkit-appearance: none;
border-radius: 0
6.CSS 超过一定宽度省略号…显示
overflow: hidden; /* 当字符串超过规定长度，显示省略符*/
text-overflow:ellipsis;
white-space: nowrap;
7.流畅滚动
body{ -webkit-overflow-scrolling:touch; }
8.禁止长按 a，img 标签长按出现菜单栏
使用 a标签的时候，移动端长按会出现一个 菜单栏，这个时候禁止呼出菜单栏的方法如下：
a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ }
9.禁止 a 标签背景
在移动端使用 a标签做按钮的时候，点按会出现一个“暗色”的背景，去掉该背景的方法如下
a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/ }
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
