移动端知识点部分总结

最近写了些hybird应用嵌入的web页面，遇到的一些问题，稍稍的总结下：

IOS和安卓不同机型上默认line-height不一致

    <p class="p1">测试1</p>
    <p class="p2">测试2</p>

    .p2 {
        font-size: 0.14rem;
        margin-top: 0.1rem;
    }

由于2种机型的默认line-height不一致,这和字体、浏览器的布局模型、操作系统的字体渲染引擎，因此遇到这种情况的时候会选择手动的设置line-height的值，然后再通过margin或者padding去控制2个p标签之间的间距。

   .p2 {
        font-size: 0.14rem;
        margin-top: 0.12rem;
        height: 0.14rem;
        line-height: 0.14rem;
   } 

IOS下Input元素focus后无法唤起键盘

有个需求就是一进入到页面，用户不做任何操作,input标签就被获取焦点,同时键盘被呼出。

获取焦点很容易做到,直接通过调用原生的focus()事件就行了。但是不能直接唤起键盘。

这是我关于这个问题的描述: IOS下Input元素focus后无法唤起键盘

文档上说明的很清楚了。native上keyboardDisplayRequiresUserAction为true时。必须要通过用户点击屏幕去主动触发键盘的唤起。

这个时候有2种方案了：

• 直接点击input标签，唤起键盘

• 通过点击屏幕的其他区域，然后触发input的focus事件,唤起键盘

这个时候我是选择的第二种方案:

进入页面后,给页面加一层mask,在mask绑定点击事件,通过这个点击事件去触发键盘的唤起.

    let maskEle = document.querySelector('.mask'),
        inputEle = document.querySelector('.input');
        
    maskEle.addEventListener('click', () => {
        inputEle.focus()
        //然后隐藏maskEle
    });

安卓机下4.x的版本通过input的focus事件可以直接唤起键盘，不过5.0后也需要用户去主动的唤起键盘.

滑动穿透

dialog组件:

    .dialog {
        position: fixed;
        z-index: 999;
    }

如果页面比较长,滑动页面的时候,dialog组件不动，但是dialog下部的可能会滑动的页面会滑动.
我的处理方法就是在dialog的mask上绑定:

    document.querySelector('.dialog-mask').addEventListener('touchmove', e => e.preventDefault());

另外还可以通过主动设置底部元素的overflow属性来控制是否能滑动.

input标签监听input事件，输入中文的时候出现英文字母也会被输入的情况

    let inputEle = document.querySelector('.input');
    
    //限制空白符的输入
    inputEle.addEventListener('input', (e) => {
        let target = e.target;
        
        target.value = target.value.replace(/\s/g, '');
        
    });

这个时候输入中文的时候，英文字母也会被输入.

通过改变input监听事件的类型:

    inputEle.addEventListener('keyup', (e) => {
        let target = e.target;
        
        target.value = target.value.replace(/\s/g, '');
    })

这样就会避免输入中文的时候连带字母也被输入进去了。另外一种解决方案,利用compositionstart和compositionend属性,具体解决过程请戳我
如果想要限制input标签输入的位数，尽量使用input的maxlength属性.
不过在移动端, type="number"的maxlength不起作用。
这个时候可以使用input的pattern来达到这一效果

    <input type="text" pattern="\d*" maxlength="11">

不过pattern这个属性在移动端,特别是安卓机下的支持度不是很好.(查看兼容性请戳我)

安卓机下背景色从border-radius溢出

在华为的某款机型下,安卓版本为4.2.2。设置:

    .circle {
        width: 0.04rem;
        height: 0.04rem;
        border-radius: 100%;
        background-color: #333;
    }

这个时候，并没有表现为正常的黑色圆形，而是一个正方形。

具体的解决方案见.一丝的blog

伪类选择器:last-child和:last-of-type的区别

• :last-child

• :first-child

• :nth-child
  3者都是从结构上来说的

    <div class="parent">
        <h1>1</h1>
        <h2>2</h2>
        <h3>3</h3>
        <h4>4</h4>
    </div>

• h1:first-child可以匹配到第一个h1

• h2:first-child匹配不到元素

• h3:first-child匹配不到元素

• h4:first-child匹配不到元素

• h4:last-child匹配到最后一个元素

---

• h1:first-of-type可以匹配到第一个h1

• h2:first-of-type匹配到h2

• h3:first-of-type匹配到h3

• h4:first-of-type匹配到h4

• h4:last-of-type匹配到最后一个元素

first-child和first-of-type的区别就是前者是匹配结构上的第一个元素,而后者是匹配子元素中同一类型元素的第一个元素.

同理:

• nth-child 和 nth-of-type

• last-child 和 last-of-type

input获取焦点时,部分机型软键盘弹出后会遮挡input标签

测试机型：

• 华为,oppo,小米安卓4.x的机型,页面不发生滚动,软键盘弹出都会遮挡input标签

• iphone 5+ 自带的输入法软键盘弹出不会遮挡,页面会发生滚动

• iphone 5+ 讯飞输入法，搜狗(页面发生滚动，但是软键盘有一段高出的部分遮挡了input标签)

安卓下的解决方案请戳我

软键盘弹出后会触发resize事件，监听resize事件完成页面的自动滚动.

IOS下第三方输入高出部分遮挡input标签暂时还未找到解决方案.

移动端1px问题

解决方案可点我

个人推荐的方案(less):

.border-new-1px(@color, @radius, @style) {
    position: relative;
    &::after {
        content: "";
        pointer-events: none;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: 0 0;
        border: 1px @style @color;
        border-radius: @radius;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }

    @media (-webkit-min-device-pixel-ratio: 3) {
        &::before, &::after {
            width: 300%;
            height: 300%;
            -webkit-transform: scale(.33);
            -webkit-transform-origin: 0 0;
            transform: scale(.33);
            border-radius: @radius * 3;
        }
        &::before {
            -webkit-transform-origin: left bottom;
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2) {
        &::after, &::before {
            width: 200%;
            height: 200%;
            border-radius: @radius * 2;
            -webkit-transform: scale(.5);
            transform: scale(.5);
        }
    }
}

通过去检测device-pixel-ratio属性(物理像素和css像素的比),例如当device-pixel-ratio为3时，会将元素的长度和宽度扩大3倍，然后通过transform: scale(.33)进行缩小。

另外还有一种 @Humphry 提供的方案也挺好用的:

使用svg作为background-image来实现, 不过最好还是使用预编译封装成函数, 这样写起来的效率也很高 具体方案请戳我.

safari下时间转化格式的问题

在safari下有这样一个问题:

    打印时间
    
    alert(new Date('2012-12-12'));
    
    //在andriod机器下正常显示,在ios机器下Invalid Date
    //当时看到后就是一脸黑人❓

具体的原因及解决方案请戳我

在前后端的时间交互过程中我觉得统一转化为时间戳还是靠谱一点。避免不同浏览器对不同时间的解析方式不同而出现兼容性的问题