移动端知识点部分总结

最近写了些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
    //当时看到后就是一脸黑人❓

具体的缘由及解决方案请戳我

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