最近写了些hybird应用嵌入的web页面，遇到的一些问题，稍稍的总结下：
IOS和安卓不同机型上默认line-height不一致
测试1
测试2
.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来达到这一效果
不过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者都是从结构上来说的
1
2
3
4
h1:first-child可以匹配到第一个h1h2:first-child匹配不到元素h3:first-child匹配不到元素h4:first-child匹配不到元素h4:last-child匹配到最后一个元素
h1:first-of-type可以匹配到第一个h1h2:first-of-type匹配到h2h3:first-of-type匹配到h3h4:first-of-type匹配到h4h4:last-of-type匹配到最后一个元素
first-child和first-of-type的区别就是前者是匹配结构上的第一个元素,而后者是匹配子元素中同一类型元素的第一个元素.
同理:
nth-child和nth-of-typelast-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
//当时看到后就是一脸黑人❓具体的原因及解决方案请戳我
在前后端的时间交互过程中我觉得统一转化为时间戳还是靠谱一点。避免不同浏览器对不同时间的解析方式不同而出现兼容性的问题