JS中ResizeObserver

什么是观察者(Observer)

阅读原文

固定视口宽度，自动缩放

1

<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">

强制固定视口宽度为content="width=640,这样无论任何分辨率下，都缩放该比率的页面。

微信-Android 浏览器刷新有缓存？

前端刷新网页的方法有很多种：

1：history.go(0)
浏览器的history对象，go 跳转到指定位置的页面。

2：location.reload(true);
重新渲染当前页面，参数为真时是从服务器端重新渲染，并响应页面，参数为假时则优先获取缓存。

3：location.replace(location);
替换当前页面的连接

4：location.assign(location);
导航到一个新的连接

5：location.href = location.href

以上几种方法都是比较常见的页面重新加载的方法。
但是在安卓微信浏览器中却无计可施。
安卓微信浏览器的缓存机制一直都是一个很诡异的问题，好想官方能有一个书面的解释，也不至于让frontender们这么辛苦。

有效的方法：
url?time=123
在参数上加一个随机参数，可以使微信不再加载缓存。

我猜想安卓微信可能将每个渲染的页面都缓存起来了，一定时间内只要url没有变化，都会优先获取缓存的内容。

阅读原文

主要记录方案二：

在vue 2.x 里面的时候，可以在 mounted 钩子中 全局监听 resize 事件，然后绑定的函数再做具体的处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

data(){
    return {
        clientHeight: '600px',
    },
},
mounted() {
    // 动态设置背景图的高度为浏览器可视区域高度

    // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
    > this.clientHeight.height = `${document.documentElement.clientHeight}px`;
    
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
    > const that = this;
    > window.onresize = function temp() {
    >     that.clientHeight = `${document.documentElement.clientHeight}px`;
    > };
},

阅读原文