h5 判断手机是否横屏竖屏显示，以及旋转屏幕后重新绘制页面

最近最的一个移动网页端h5项目需求如下：当进入某个指定页面时，如果手机当时是竖屏，则提示横屏显示；在这个页面时，若横屏显示转成竖屏显示时候，提示横屏显示，横屏显示时候是正常显示，无提示；大概的效果如下图所示：

竖屏显示.png

componentDidMount() {
        // 在进入页面时，并且dom节点渲染后，调用该方法
        this.renderResize();
        
        setTimeout(() => this.setState({
            height: (this.state.height - 38 - 50) + "px",
        }), 0);
    }

    renderResize = () => {
        var width = document.documentElement.clientWidth;
        var height =  document.documentElement.clientHeight;

        // 通过判断屏幕的宽高比来判断是横屏害死竖屏，若是竖屏则提示
        if( width > height ){
            //横竖屏切换是整个屏幕的宽高会变化，如果给了一个特定区域比如有滚动条的列表设置了高度，那么在横竖屏切换时需要重新计算高度给该列表赋值，以免横竖屏切换时页面显示会出问题
            this.setState({
                height: (height - 38 - 50) + "px",
            })
        } else{
            Toast.info("建议横屏显示，马上设置", 3);
            this.setState({
                height: (height - 66 - 50) + "px",
            })

        }

    }

    componentWillMount(){
        // 需要在横竖屏切换时给出提示，所以添加了监听事件，一开始我是监听了
         orientationchange事件，但是有时会失效，判断失误，所以就监听了resize事件
        window.addEventListener("resize", this.renderResize, false);
    }


    componentWillUnmount = () => {
        //因为其他页面不需要做横竖屏的提示，所以在离开这个页面时移除这个监听时间
        window.removeEventListener("resize", this.renderResize, false);
    }