1. 数字键盘
效果对应下图
keyboard.jpg
注意:单独使用type="number"时候,iOS上出现并不是九宫格的数字键盘,如果需要九宫格的数字键盘,可选择使用2、3的方法。 上面3种方法均可在Android上唤起九宫格的数字键盘。
2. 键盘显示“搜索”按钮
3. 去除textarea默认样式
去除右下角样式
resize:none;
去除框外上下空白
vertical-align: middle;
4. ios&&android系统
禁止ios和android用户选中文字
-webkit-user-select: none;
禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片
-webkit-touch-callout: none;
webkit去除表单元素的默认样式
-webkit-appearance: none;
修改表单输入框placeholder的样式
input::-webkit-input-placeholder{color: #ccc;}
input:focus::-webkit-input-placeholder{color: #333;}
去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景
a,button,input{-webkit-tap-highlight-color: rgba(255,0,0,0);}
ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}
android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
取消input在ios下,输入的时候英文首字母的默认大写
打电话和发短信
发短信给: 10086
5. meta标签
移动端页面设置视口宽度等于设备宽度,并禁止缩放。
移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面。
禁止将页面中的数字识别为电话号码
忽略Android平台中对邮箱地址的识别
当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
添加到主屏后的标题
添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner
viewport模板
title