finereport普通报表的移动端自适应方案

移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本。

首先,了解一下当前我们可以做到的自适应效果:

当前,用FIneReport按某一尺寸做好的报表,如果在屏幕像素较大的手机上打开,我们可以做到自动放大,但是我们当前最多只能放大两倍。所以,在制作移动端报表时,尺寸要有所取舍了。

之前给一个客户做过移动端报表,实现了在iphone4、小米、华为P6、三星S4等手机上自适应的效果(这里说的自适应主要是宽度上的或者说是横向上的自适应),具体做法如下:

  1. 设置页面大小,将页面宽度设置成120,页边距设置成0。

  1. 报表设计界面有红色的页边距线,考虑到精度问题,可以是先把单元格宽度设置小一点。

注:在制作过程中还发现一个问题,移动端打开报表后,并非一定是横向自适应,当当前报表纵向高度小于横向宽度时,会变成纵向自适应。这里说的高度和宽度并非是指页面纸张的宽度和高度,而是指有数据的单元格所占区域的高度和宽度。

时间: 2024-11-01 23:16:23

finereport普通报表的移动端自适应方案的相关文章

移动端自适应方案

本文来自大搜车博客:移动端自适应方案,主要讲:1.移动真的需要动态生成viewport吗?2.移动前端如何自适应?作者给出主观的最佳实践:最帅的flex.演示地址.里面讲了一些互联网公司的自适应做法,可以看看. 研究样本 手淘 ml.JS 天猫首页 手机携程 一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事.回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下. 研究结论 手淘 获取手机dpr(window.devicePix

(转)移动端自适应方案

研究样本 手淘 ml.js 天猫首页 手机携程 一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事.回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下. 研究结论 手淘 获取手机dpr(window.devicePixelRatio),动态生成viewport. 换取手机宽度,分成10份,每一份的宽度即是rem的尺寸. 根据设计稿尺寸(px)通过计算,转换成rem去布局. ps:海外淘宝并没有这样做,而是scale1.0并且图

移动端自适应布局方案尝试

原文地址:移动端自适应布局方案尝试 问题 刚开始接触移动端H5页面的时候最困扰的几个问题是: 6或6p上明明是1px的边框怎么就成了2px或3px辣么粗! 图片,div等如何等比自适应设计图 后来慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成,第二点知道了单位rem. 目的 不想因为使用rem而一一去计算设计稿的尺寸,设计稿750的尺寸的标注可以直接在sass中使用:字体不使用rem缩放,原因是: 显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号

原生js移动端字体自适应方案

自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: 1 (function(doc, win) { 2 var docEl = doc.documentElement, 3 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 4 recalc = function() { 5 va

web app 自适应方案总结 关键字 弹性布局之rem

web app 自适应方案总结 关键字 弹性布局之rem 关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/define-font-size-with-css3-rem 现在移动端 web app 的自适应布局的方案有 5种. 零. Flexbox 使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何

FineReport关于tomcat集群部署的方案

多台服务器集群后,配置权限.数据连接.模板.定时调度等,只能每台服务器一个个配置,不会自动同步到所有服务器. 针对上述情况,在FineReport中提供新集群部署插件,将xml配置文件.finedb/logdb数据(定时任务.报表目录管理.批量导入.统计信息)的修改都对主机生效.其他辅机的信息读取也都从主机读取,保证了数据同步. 实现了灾备,即主机当即后,次主机会上位接替主机的工作,保证系统正常运作. 同时还增加了集群灾备之文件同步,会将主机的finedb.xml.模板.jar包.插件等等备份到

FineReport中如何安装移动端H5插件

1. HTML5报表插件安装及使用编辑 插件安装 插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索,这里就不做详细介绍了. 移动端HTML5报表使用方法 安装好插件后,在浏览器中调用时,需要在报表路径后面加上参数op=h5.但是PC端不完全支持H5效果. 移动端添加参数前后效果: fs上挂报表的时候不用带参数,会自动识别是不是在手机上访问的.另外移动端的H5插件,图表是只支持显示新图表. 2. Html5报表制作及手机效果编辑 手机页面大小 制作手机上的报表与PC端报表制作过

如何通过 WebP 自适应方案减少图片资源大小

前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能降低移动网络的流量费用.原图产生的 PNG.JPEG.GIF 和 SVG 图片一般都有很大的压缩余地.下文将重点介绍一款图片新格式:WebP,从而揭开它神秘的面纱. 解决方案:使用 WebP 优化图像 1.什么是 WebP ? WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式

移动端自适应

此代码加到head标签里面,加入后可随不同机型的移动设备,设置html的fontSize大小,这样子用rem可作为解决移动端自适应的方案 !function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F>750&&(a=750*F);var d=a/10;I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.document