meta

禁用电话和邮箱

真机中出现疑似手机号码或者邮箱的字符串的时候, 点击会去调用电话或者邮箱. 但是邮箱没效果

 <meta name="format-detection" content="telephone=no,email=no"/>

移动端样式重置

-webkit-user-select: none;: 禁止用户选中文字, 安卓无效, 需要通过事件解决
-webkit-touch-callout: none;: 禁止长按弹出系统菜单
-webkit-tap-highlight-color: rgba(0,0,0,0): 去除安卓下 a / button / input 被点击时产生的边框 & 去除 ios 下 a 被点击时候的半透明灰色背景
-webkit-tap-highlight-color: rgba(0,0,0,0): 阻止切换横竖屏或者用户设置浏览器, 字体大小会自动改变
-webkit-appearance: none; border-radius: 0;: 去除 button 与 input的默认背景, 按钮在 ios 下都是默认圆角

    /* 修改 placeholder 的默认样式 */
    input::-webkit-input-placeholder{
        color: #000;    /* 默认样式 */
    }
    input:focus::-webkit-input-placeholder{
        color: #f00;    /* 点击之后的样式 */
    }

移动端重置样式 css 文件

 body {
            font-family: helvetica;
            margin: 0;
        }
        body *{
            -webkit-user-select: none;
            -webkit-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        a, button, input {
            -webkit-tap-highlight-color: rgba(0,0,0,0)
        }
        button, input{
            -webkit-appearance: none;
            border-radius: 0;
        } 
        input::-webkit-input-placeholder{
            color: #000;
        }
        input:focus::-webkit-input-placeholder{
            color: #f00;
        }

默认字体

ios

中文: HeiTi SC
英文: Helvetica
数字: HelveticaNeue
无微软雅黑

android

中文: Droidsansfallback
英文&数字: Droid Sans
无微软雅黑

font-family: helvetica

非得要自己定义字体 ?

引入字体, 流量加载字体库, 耗流量