最近最的一个移动网页端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);
}
