最近手上的一个H5项目快要结束了，阶段性的做一个小总结，记录一下项目中遇到的一些问题。
- css中的像素是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。早期的手机，屏幕分辨率很低，iphone3 的分辨率是320x480，所以在iphone3上，一个css像素，就等于一个屏幕物理像素。后来手机分辨率提高，iphone4开始，就变成了640x960，屏幕尺寸没有变。这时一个css像素就变成了两个物理像素。用户把页面放大一倍，css中一个1px所代表的物理像素就会增加一倍。
浏览器会把自己默认的viewport设置为980px或者1024px。
更多请见：https://www.cnblogs.com/2050/p/3877280.html
- 现在要做一个图片加载失败的处理，当后端没有返回图片的url或者图片加载失败就显示一个默认的图片
<img />标签在图片没有的时候显示一张图片，有的时候显示真实图片，如果正常就显示图片。
最开始，实现的方法是给<img />标签上添加一个background,然后将这个默认的图片设置成背景图片。会出现下面的问题：
如果url为空，<img>会有一条错位的border，如果图片加载失败，<img>不仅会出现一个border，还会有一个自带的加载失败的小图片(左上角)。我们一个一个的来解决。首先解决加载失败时出现的那个小图片。设置<img>的onerror属性，设置图片加载错误时显示的图片。这里有一个问题，当触发onerror的时候，会重新去请求onerror设置的图片，但是如果onerror属性指定的图片出现错误，就会不停的去请求，前端崩溃。
解决方案
- 方案1
<img onerror="this.onerror=''; src='...'" />
防止一直不停的请求
- 方案2
使用base64编码显示。就完全不会出现崩溃的问题。
这个问题还没有解决完，当url为空时，有的浏览器还是会有一根线。这根线是<img>标签自带的，而且将border设置为none也不能消除，所以做了一个处理:
img[src = ""] {
opacity:0;
}
然后在img外部裹一个标签，将标签的background设置为默认的图片。
注：这里我尝试过用伪元素，但是在一些手机的浏览器上仍然会有这条幽灵似的border，所以我还是多加了一个标签。
- 在我们的项目中，页面顶部有一个
position: fixed定位的导航，导航栏有一个touch事件。当我的页面随着滚动条滚动之后，touch事件失效。
其实对于这个问题，我找到了解决方案，但是产生的原因还不太清楚(我认为这是一个浏览器的bug，首先怀疑别人，我怎么会写出bug)。
解决方案就是将这个touch事件放在window对象上监听，用冒泡的方法判断e.target执行回调。代码如下
const navbar = document.querySelector(".navbar");
window.addEventListener("touchstart", e => {
if (e.target === navbar) {
// callback
}
});
- 手机端做一屏展示一张设计图的需求很常见。我遇到的问题是：
我在做一屏高度计算的时候，代码是这样写的
.box {
height: calc(100vh - 0.4rem)
}
这里的0.4rem是页面顶部导航的高度。在微信的浏览器上有一个自带的底部的导航，在滑动页面时，底部的导航会时而隐藏，时而显示。。这样会导致我的.box的高度会不停的重新计算，.box里的内容会重新布局，页面里的元素看起来就会有一点跳动。
分析这个问题，出现的原因就是浏览器底部的那个自带导航，虽然微信有开发文档隐藏这个导航，但是不能保证其他浏览器不会出现相同的问题。而出现导航是因为出发了scroll事件。那么如果我们想一个办法不用触发scroll事件，就不会出现这个导航。所以借鉴一下swiper的实现思路，整个过程不触发scroll，而是用transform来滑动。来盗个图看看
布局的代码
//example
<div class="ice-container">
<div class="ice-wrapper" id="myIceId">
<div class="ice-slide">Slide 1</div>
<div class="ice-slide">Slide 2</div>
<div class="ice-slide">Slide 3</div>
</div>
</div>
通过控制ice-wrapper的 transform: translate 来控制ice-container里的元素的滑动。
以上只是说明原理，推荐一篇swiper实现原理的文章：https://github.com/aooy/blog/issues/3
-
AnimationEnd事件。
animationend 是每次动画执行完成时执行一次。兼容性：
所以手机端得使用：webkitAnimationEnd。
- 一段文字中，除最后一排外全都两端对齐，最后一排居中对齐。
text-align: justify;
text-align-last: center;
注：text-align-last属性在safari上不兼容
作为总结学习，未完待续。。
网友评论