移动端Tips

判断是否是IPhoneX系列产品

因为IPhoneX后的产品底部返回键: 34pt, 大概45px (px = pt * 4 / 3)

iPhone X、iPhone XS、iPhone XS Max刘海头高度30px，iPhone XR刘海头高度33px

export const isIPhoneX = () => {
    if (typeof window !== 'undefined' && window) {
        // iPhone X、iPhone XS
        let isIPhoneX = /iphone/gi.test(window.navigator.userAgent)
            && window.devicePixelRatio
            && window.devicePixelRatio === 3
            && window.screen.width === 375
            && window.screen.height === 812
        // iPhone XS Max
        let isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent)
            && window.devicePixelRatio
            && window.devicePixelRatio === 3
            && window.screen.width === 414
            && window.screen.height === 896
        // iPhone XR
        let isIPhoneXR = /iphone/gi.test(window.navigator.userAgent)
            && window.devicePixelRatio
            && window.devicePixelRatio === 2
            && window.screen.width === 414
            && window.screen.height === 896
        return isIPhoneX || isIPhoneXSMax || isIPhoneXR
    }
    return false
}

调用移动端系统功能

<!-- 拨号 -->
<a href="tel:10086">打电话给: 10086</a>

<!-- 发送短信 -->
<a href="sms:10086">发短信给: 10086</a>

<!-- 发送邮件 -->
<a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a>

<!-- 选择照片或者拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或者拍摄视频 -->
<input type="file" accept="video/*">

<!-- 多选 -->
<input type="file" multiple>

H5移动端开发遇到的东西

弹起移动端的数字输入

<!-- 有"#" "*"符号输入 -->
<input type="tel">

<!-- 纯数字 -->
<input type="number" pattern="\d"> 
<input type="number" pattern="[0-9]*">  

iOS中，只有[0-9]\*才可以调起九宫格数字键盘，\d 无效 Android 4.4👇(包括微信所用的X5内核)，两者都调起数字键盘； Android 4.4.4👆，只认 type 属性，也就是说，如果上面的代码将type="number"改为type="text" ，将调起全键盘而不会是九宫格数字键盘。

常用的pattern正则表达式

• 信用卡 [0-9]{13,16}
• 银联卡 ^62[0-5]\d{13,16}$
• Visa: ^4[0-9]{12}(?:[0-9]{3})?$

caniuse - pattern