标签:
在上一篇 移动端之在不同尺寸大小的手机上展示同一效果解决方案 中,我们考虑的只是默认竖屏的情况.很显然,如果用户手机允许屏幕旋转,那么在横屏的情况下,页面就变得很恶心了.
因此我们需要进行一个处理,来判断浏览器是否是横屏,在横屏的情况下,要使用高度值来计算html的font-size.
因为项目引入了jquery,因此下面的代码全部是jquery语法.
function htmlFontSize(){
var win = $(window),
winH = win.height(),
winW = win.width(),
hfz;
winW > winH ? hfz = winH : hfz = winW;
$("html").css(‘font-size‘,~~(hfz*100000/36)/100000+"px");
}
通过上面的代码,就可以在横屏的情况下正确的显示页面的大小了.但是,横屏的情况下,页面会变得比较怪异,应该给用户一个提示.
百度了一下,找到了横屏的事件与解决方法.
function orientationChange() {
if (window.orientation==90 || window.orientation==-90){
alert("横屏下不能获得最佳体验,建议竖屏浏览网页!");
}
};
横屏提示代码如上.
再然后,就是在正确的时候要执行这些函数了.
$(function(){
htmlFontSize();
$(window).on("resize",function(){
htmlFontSize();
});
orientationChange();
$(window).on("orientationchange",function(){
orientationChange();
});
});
如上.效果是正确的.但是,好像我用了两个事件有点多余.因此,可以将代码整合到一个事件里面.
$(function(){
htmlFontSize();
orientationChange();
$(window).on("orientationchange",function(){
htmlFontSize();
orientationChange();
});
});
这里需要提醒的是resize事件在PC上进行调试的时候还是很好用的.
最后,这两个函数完全可以合并到一个函数里面.就不多写了.因为,领导说横屏下我做的效果还不错,就不用提示了:)
本文由FungLeo原创,允许转载.但转载必须署名作者,并保留文章首发链接.否则将追究法律责任.
移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo
标签:
原文地址:http://blog.csdn.net/fungleo/article/details/51221622