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

Posted 2020-09-20 手掌日月摘星辰

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

 

 

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

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