网页设计之网页首屏高度确定技巧
网页设计之网页首屏高度的确定有什么技巧呢?本站小编就为大家分享以下的技巧,希望可以为你带来帮助!
首屏的高度直接跟客户端的各种客观的条件有关系,因为我们要确定首屏的高度(标注首屏线)就需要结合一些相对准确的内部统计数据来分析了,根据各个客户端的操作系统、浏览器分布和屏幕分辨率等情况,并结合常见浏览器状态栏、任务栏等高度进行分析如下:
第一步:分析常见分辨率及浏览器下高度数据
常见浏览器分辨率表
综合上面表中各个分辨率及浏览器下的统计数据,我们很容易画出两条首屏线,分别为 580PX 和 710PX,对应不同的分辨率。
第二步:分析客户端实际分辨率及浏览器可见区域
实际分辨率比例图
通过收集的用户数据我们可以得出如下数据:
1) 1024×768, 1440×900, 1366×768, 1280×800 分辨率是大部分客户端的设置;
2) 客户端分辨率总类非常多,不常见的分辨率比例里面占了相当多的种类;
3) 随着硬件的升级换代800×600,1024×600 等600PX高度的分辨率在逐步消失。
用户可见区域高度统计图
通过对大于30W台客户端用户进行测试,得到的测试数据如下:
1) viewport 高度低于等于 580 的'有 116786 个人,占 44.64%
2) viewport 高度低于等于 720 的有 216227 个人,占 82.64%
3) viewport 高度低于等于 800 的有 241420 个人,占 92.27%
4) viewport 高度低于等于 900 的有 259174 个人,占 99.06%
第三步:浏览器可见区域热区图分析
浏览器常见热区分布图
综合上面三个步骤,最终我们可以确定:
1、通过分析上面浏览器常见热区分布图我们可以看出来:在网页设计时如果把页面首屏高度定在大于600像素的分辨率上,有可能会导致很多的用户看不完整,考虑到良好的用户体验度,建议:网页设计师在设计网页时以600像素作为首屏高度来设计;
2、根据用户可见区域高度统计图及整体二八比例划分的原则,如果把首屏高度确定在710像素可以照顾到约80%的用户群体,小K建议:前端开发在做页面时可考虑把710 像素视为首屏区域高度,采用技术手段对首屏的表现进行优先加载可获得良好的用户体验度。
-
javascript操作select元素案例分析
本文实例讲述了javascript操作select元素的.用法。分享给大家供大家参考。具体分析如下:这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮。当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢...
-
浅谈jquery 注意事项与常用语法
1、关于选择器中含有特殊符号选择器中含有".","#","(","]"等特殊字符,根据W3C的规定,属性值中是不能含有这些特殊字符的,例如:复制代码代码如下:bb如果按照普通的方式来获取,例如:复制代码代码如下:$("#id#b");$("#id[1]");以上代码不能正确获取到元素,正确的写法如下:复...
-
PHP开发工程师的具体职责
PHP开发工程师的具体职责1职责:1,负责设计产品的前后台技术框架;2,承担系统的开发工作,改进框架,基础架构,持续优化服务;3,承担关键项目的技术评审及总体设计,参与构建系统原型及关键技术问题的攻关活动;4,控制产品设计质量,制定产品开发规范、指导或撰写方案、设计等文档;5,...
-
JavaScript 函数表达式
JavaScript中创建函数主要有两种方法:函数声明和函数表达式。这两种方式都有不同的适用场景。这篇笔记主要关注的是函数表达式的几大特点以及它的使用场景,下面一一描述。主要特点可选的函数名称函数名称是函数声明的必需组成部分,这个函数名称相当于一个变量,新定...