码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-05-28 21:38:49      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:--   strong   mil   分辨率   firefox   opera   center   相同   窗体   

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

 

 

以下数据由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要素

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

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

标签:--   strong   mil   分辨率   firefox   opera   center   相同   窗体   

原文地址:http://www.cnblogs.com/qiilee/p/6916636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!