最近做了个Hybrid的项目,对于 H5 的布局 什么的就不多说了,这里总结下遇到的问题:
Retina 屏幕不够清晰,不同手机显示不一致.
关于什么是 Retina 屏幕,究竟会有什么影响?请移步我这篇文章:
开发还要根据设计搞进行计算像素十分不方便。
具体也可参考我这篇文章。在vue中的postcss相关
移动端 1px 问题
这里遇到一些问题就是1px的问题,在 Retina 屏幕进行适配。解决方案很多种。我这里是利用媒介查询,我觉这种方法比较简单和容易控制,所以我这里是这样解决的:
CSS
.border {
border-bottom: 1px solid #D9D9D9;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border {
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border {
-webkit-transform: scaleY(0.33);
-webkit-transform-origin:0 0;
overflow: hidden;
}
}
ios用户,如果用户昵称是手机号码,就会在页面中显示蓝色字体,并且可以拨打。
<meta name = "format-detection" content = "telephone=no">
ios 用户,点击后,伪类的 :hover 不生效。安卓ok
解决方法也有很多种。这里我是这样解决:
<body ontouchstart="">
....
</body>
增加 ontouchstart 事件