苹果手机旋转屏幕之后的问题

    换句话说，当苹果手机屏幕旋转页面重新加载之后，问题就出现了。

    在安卓和谷歌浏览器上正常显示的页面，在苹果手机上出岔子了。具体问题：当页面旋转后，根据父容器的高度更改一个元素的高度，代码执行了，但是没有预期的效果。

    现在想来，没有想到页面旋转后会重新加载页面，是导致后续很久定位不到问题关键所在。

    问题的定位过程：1.获取父容器和子容器，页面旋转后打印高度。发现打印的高度是页面旋转之前的高度，而不是页面旋转之后的高度。猜测：代码执行时页面还没加载好，dom还没全部生成。遂放在页面结构加载完后取值，但还是这样。偶然想到可能是屏幕旋转后重新加载了。百度后才搞明白。

页面加载后，html，css和js同时解析，我的js代码在页面旋转后立即执行，必然快于html.css的解析速度，当js取值时，元素的高度还没有变化。所以才有问题定位时的现象。最后是页面加载后延迟0.4秒执行，预期的效果就出来了。

几个小点：

1.angular获取dom

2.angular操作dom

3.代码重构

1.html:

<div #videoParent></div>

2.ts

@ViewChild("video1") videoParent: ElementRef;

let videoNative=this.videoParent.natveElement;

2.操作dom

render2或者直接.style.setProperty()

3.代码重构

之前尝试解决问题时，添加了很多代码，且逻辑混乱，复杂， 功能也没有分离。导致一个方法非常难看。遂将可分离和重复部分分离，分装成单独函数。分离之后后续代码维护和可靠性都好了很多。