满屏浏览器设计解决方案分析

满屏浏览器设计解决方案分析

以下数据由js获取

介于时下硬件尺寸不一,做出细微数据测试


屏幕尺寸(英寸)


分辨率


窗体高度(px)


浏览器


14


1366x768


650


ie9


591


firefox


15.6


1366x768


673


ie9


616


firefox


17


1024x768


612


ie8


630


firefox

以上数据真实有效

表格数据分析得出结论:在浏览器类型相同及纵向分辨率相同的情况下浏览器窗体高度受屏幕尺寸影响

再次分析浏览器本身,测试环境--尺寸:15.6,分辨率1366x768


浏览器类型


窗体高度


窗体高度(px)


360


582


ie9


673


firefox


616


chrome


667


safari


630


opera


645

在同等尺寸及纵向为768下,从以上数据分析得出,浏览器窗体高度受浏览器类型影响

另注:在同等尺寸及同等纵向分辨率以及同样浏览器类型下,浏览器窗口高度还受浏览器顶部面板层级数影响

综上所述,总结,浏览器窗体高度受:屏幕尺寸(硬件)浏览器类型浏览器顶部面板层级数 3个因素影响

所以,由于这3要素的影响,要做满屏设计(多文档流满屏),需要定格这3要素

解决方案:需环境特定:尺寸相同浏览器类型相同浏览器顶部面板层级数相同

时间: 2024-10-05 15:32:07

满屏浏览器设计解决方案分析的相关文章

大屏设计系列之五——大屏设计语言分析

如果您想订阅本博客内容,每天自动发到您的邮箱中,请点这里 作者:蓝蓝 蓝蓝设计经常会接到大屏设计的项目,比如中国移动互联网监控大屏可视化设计及开发.太极集团承接的中央台应急指挥中心大屏可视化设计.交大思源承接的北京地铁轨道批挥中心大屏可视化设计.数码视讯展厅大屏可视化设计,在积累了一定经验的同时,也在不断的学习和丰富关于大屏设计的特点及数据可视化的表达方式. 数据可视化过滤了非常多的冗余信息,浓缩了最重要的信息,它的魅力就在于将枯燥的数据组织在一起,把最需要的那些编辑成一个故事.目前大数据那么流

关于横屏和竖屏以及满屏

1.info.plist 找到"Supported interface orientations" 设置item 项为Portrait就可以了.这个设置为全局设置. 整个应用的屏幕状态 2.满屏问题 (转载http://www.ithao123.cn/content-9618420.html) IOS 模拟器 在iPhone5和iPhone5s显示不全,不能全屏显示 [摘要:正在编写IOS运用顺序的过程当中,我不停皆是应用iPhone Retina(3.5-inch)摹拟器测试的,统统

Taitherm (ex-Radtherm) v12.0.0 Win64 & Linux64 2CD高级热管理设计与分析

Taitherm (ex-Radtherm) v12.0.0 Win64 & Linux64 2CD高级热管理设计与分析工一款用于计算辐射视角系数和阳光照射的先进光线跟踪技术,是新一代高级热管理设计与分析工具,堪称目前市场上最快的辐射换热求解器之 一.在近20年前,ThermoAnalytics的创始人设计了只能用于放射和辐射的求解器,被命名为RadTherm.在过去的二十年中,这款软件已经发 展到了支持分析计算所有的热传递模式:辐射.传导.对流.以及平流等.正如发布的Taitherm (ex-

蚂蚁金服推人脸识别机器人:满屏网红脸也不晕

6月29日消息,蚂蚁金服官方微博发布消息称,其研发的人工智能生物识别机器人“蚂可”(Mark)上线,并将于6月30日与号称“鬼才之眼”的水哥王昱珩比试:对网红脸进行人脸识别,全程将会通过网络直播. 蚂蚁金服安全智能部总监陈继东表示:“‘蚂可’的认脸能力理论上已经超越了人类肉眼,目前蚂蚁金服运用的生物识别技术在全球范围内的多项权威评测保持领先排名,在国际权威人脸数据库上的公开评测精度已超过99.5%.” 蚂蚁金服生物识别技术小组还设计了一个网红脸识别小测试,据称蚂可能够轻松通过30关,在这个满屏网

最小高度为满屏的界面布局

在前端界面布局中经常遇到一种场景:就是界面有header和footer的情况,当采用流体布局的时候经常会因为中间的内容部分的内容不足导致界面的footer浮在界面文档的底部,但是却在窗口的中部的情况,体验非常差,问题的解决经历了以下过程. a.采用了fixed来固定footer在窗口底部,但是会产生文档内容过长导致的footer不能跟着文档底部流动,而且产生遮挡的现象,同时对于ie6的兼容不好. b.使用文档流布局和绝对布局结合,通过js来实现,通过进行窗口的高度和文档的高度对比,确定底部foo

跨浏览器resize事件分析

resize事件 原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera 触发1次 Safari 触发1次 场景分析 window resize时,部分组件需要重置大小(一次):部分组件不需要重置大小: 开源库分析 jquery-resize 优点:使用简便 $('#div1').on('resize', function (e) { console.log('[div1

(转)常用的算法设计与分析-一夜星辰的博客

算法设计与分析 分治法 思想 1. 将一个规模为n的问题分解为k个规模较小的子问题,这些子问题互相独立且与原问题相同.递归地解这些子问题,然后将各子问题的解合并得到原问题的解. 2. divide-and-conquer(P) { if(|P| <= n0)adhoc(P); divide P into samller subinstances P1,P2...,Pk; for(int i = 1;i < k;i++) { yi = divide-and-conquer(Pi); } retu

满屏背景图登录

这是我手上的设计图 是思博大神的作品,ewei的新项目.图是1400*748的,把这张图做成网页说难不难,可是我考虑的问题是高度还原,即是在各个主流分辨率下看到的效果都要一样,这就有点懵逼了,查了很多网站的登录效果,基本都不是满屏登录的比如淘宝的京东的还有很多购物网站的登录框要么就是中间居中登录,就算是有图片的登录框也只是小图,这里放几张图上来吧,顺便加深记忆.当你去搜索一样东西的时候,有了明确的目的,这个时候你的视角看到的内容会不同很多.比如这次搜索登录框我就记住了基本的登录样式. 找了很多网

关于Flash满屏显示的总结

1.Flash只能设置固定宽高,全屏的Flash通常宽高都符合一般的显示器分辨率 2.Flash满屏的方法:Flash的RESIZE事件捕捉舞台宽高,Flash发布设置"百分比+无缩放",HTML设置100%显示 3.Flash满屏失败的原因:Flash宽高大于通常显示器分辨率,使得Flash基于Flash player的比率缩放了原来的尺寸,导致多出了舞台. 4.Flash的显示错位和异常:原因出于IE版本和某些游览器的兼容性问题,Flash内的元素通常不会受到影响,此时可以通过HT