html 横屏时修改样式,移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo...

移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo

前言

在上一篇 移动端之在不同尺寸大小的手机上展示同一效果解决方案 中,我们考虑的只是默认竖屏的情况.很显然,如果用户手机允许屏幕旋转,那么在横屏的情况下,页面就变得很恶心了.

因此我们需要进行一个处理,来判断浏览器是否是横屏,在横屏的情况下,要使用高度值来计算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原创,允许转载.但转载必须署名作者,并保留文章首发链接.否则将追究法律责任.

首发地址:http://blog.csdn.net/FungLeo/article/details/51221622

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值