H5网站如何检测移动设备横竖屏并旋转?

现在企业做网站越来越多的企业选择做H5自适应网站,那么中这种自适应网站经常会遇到一个问题就,那就是在移动端展示时,如果横屏的时候,网站不会自动旋转,遇到这种情况怎么办呢?

友软科技的程序员在日前做的一个h5网站中就发现了这种问题,于是想到了一种比较简单的解决方案,通过js来判断移动设备是横屏还是竖屏,如果到网站的访问设备分辨率出现变化,那么我就让它自动刷新一次页面,这样网站页面自然就实现旋转了。

这种方法代码也比较少,也比较容易实现,用到的js代码如下:

function hengshuping(){

window.location.reload();

}

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

除了这种方法以外,也有一些其他的判断方式来判断浏览设备的分辨率,比如css代码中的“@media”,但是既要让网页判断浏览设备分辨率,同时还要让网页自动旋转,我能想到的最简单的方法也就是以上这段代码了,希望朋友们有什么好的方法也来这里分享一下。

你可能感兴趣的:(H5网站如何检测移动设备横竖屏并旋转?)