h5的横屏适配

野生程序猿-杂烧4年前随意分享1024

最近遇到一个问题,我们开发的软件是横屏软件,因客户群体主要是学校,就是使用者是老师和学生。本来软件设计的是电脑机房里用,现在学校希望手机也可以用。结果手机用起来就是这个现象。

ssssss.png


老师提意见,说字太小看不清。本来让客户开个屏幕旋转就可以了,但是因为要求老师、学生都多做一步太麻烦(我们的宗旨是不麻烦客户)。于是要做个旋转横屏效果。

于是进行代码改造来解决,主要是旋转,以及新的宽高计算。因为我开发一直用的rem单位,所以只要插件式开发就可以了

function app_size()
{
	

	var $scope=app.$scope;
	var bili=1.77778;
    var all_width=window.innerWidth;
    var all_height=window.innerHeight;
    var rotate=0;
    if(all_height>all_width*bili)
    {
		var WW=all_width;
		var HH=Math.floor(all_width*bili);
    }else{
        var HH=all_height;
        var WW=Math.floor(all_height/bili);       
    }
    if(rotate==90)
    {

        var top='left';
        var left='top';
        var margin_left=(all_height-HH)/2+HH;
        var margin_top=(all_width-WW)/2;
        var leftx=(all_width-WW)/2+WW;
        var topx=(all_height-HH)/2;

    }else{

        var top='top';
        var left='left';
        var margin_left=(all_width-WW)/2;
        var margin_top=(all_height-HH)/2;
        var leftx=(all_width-WW)/2;
        var topx=(all_height-HH)/2;
    }

    $scope.rotate = rotate;
    $scope.WW = WW;
    $scope.HH = HH;
    $scope.app_width = WW;
    $scope.app_height = HH;
    $scope.all_width = all_width;
    $scope.all_height = all_height;
    $scope.top = top;
    $scope.left = left;
    $scope.topx = topx;
    $scope.leftx = leftx;
    $scope.margin_top = margin_top;
    $scope.margin_left = margin_left;
    $("html").css("font-size",WW + "px");
	app.update();
	
}

虽然很惭愧还是用的jquery,但是好在我是用的jquery+angular.js,可以通过插件的原理,修改框架css,不需要动源代码。更主要的是监听resize,输入法出来后可以再计算尺寸,不是歪的。

标签: angular.js

相关文章

python多数据库+memcache操作练习

import function import math import threading from pymemcache.client.base ...

推荐个强迫症最爱的任务栏管理工具7+ Taskbar Tweaker

推荐个强迫症最爱的任务栏管理工具7+ Taskbar Tweaker

我们开发人员用到的软件特别多,尤其全栈。前后端开发软件、ps、模拟器、办公软件、cmd窗口。工作的时候我不喜欢把任务栏按组叠加。像cmd窗口给我叠在一起,找都找不到,打乱开发的节奏。...

推荐一个前端框架Svelte(超级轻量级)

现在的前端框架太多了,国内用得比较多的是vue,非常强大,但是个人感觉灵活性糟糕,代码比较繁琐。近期接触一个框架,顿时让我感觉非常的爽,一种似曾相似的感觉,这个框架就是Svelte。Svelte是一个...

前端的多端适配-硬件接口篇

前端的多端适配-硬件接口篇

我们在多端开发的时候经常会遇到硬件接口的坑,比方调用扫一扫。h5网页要扫一扫,小程序要扫一扫,app也要扫一扫。我们 正常都是一边开发,一边h5端网页调试。但是h5端根本没有办法扫一扫啊?没有支付啊?...

nodejs对memcache进行备份与恢复

memcache是个古老的高速缓存工具,前辈们古老的程序还用着。但是市场上没有完美的备份恢复工具,老板让我开发一个。这需求让我两眼一抹黑,完全不知所措。先模拟一下思路,可以telenet到端口上,然后...

如何判断一个经纬度是哪个省?

需求是这样的,有个卖gps防盗器的公司,需要分析出用户去年一年内经过了那些城市?假设有10万个用户,每个用户有100万个轨迹点。我们怎么分析呢?常规方法是一个点一个点的分析,那就是10w*100w=1...