网页如何选择分辨率和首页高度

首屏的高度直接跟客户端的各种客观的条件有关系,因为我们要确定首屏的高度(标注首屏线)就需要结合一些相对准确的内部统计数据来分析了,根据各个客户端的操作系统、浏览器分布和屏幕分辨率等情况,并结合常见浏览器状态栏、任务栏等高度进行分析如下:

操作方法

  • 01

    分析常见分辨率及浏览器下高度数据 综合上面表中各个分辨率及浏览器下的统计数据,我们很容易画出两条首屏线,分别为 580PX 和 710PX,对应不同的分辨率。

  • 02

    分析客户端实际分辨率及浏览器可见区域 通过收集的用户数据我们可以得出如下数据: 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%

  • 03

    浏览器可见区域热区图分析 综合上面三个步骤,最终我们可以确定: 1、通过分析上面浏览器常见热区分布图我们可以看出来:在网页设计时如果把页面首屏高度定在大于600像素的分辨率上,有可能会导致很多的用户看不完整,考虑到良好的用户体验度,建议:网页设计师在设计网页时以600像素作为首屏高度来设计; 2、根据用户可见区域高度统计图及整体二八比例划分的原则,如果把首屏高度确定在710像素可以照顾到约80%的用户群体,小K建议:前端开发在做页面时可考虑把710 像素视为首屏区域高度,采用技术手段对首屏的表现进行优先加载可获得良好的用户体验度。

(0)

相关推荐

  • 如何去除网页限制(网页不能选择不能复制)?

    有的网页不能选择,不能复制,如何才能轻松快捷去除这些网页限制? 操作方法 01 这个网页(农行账户)上的内容可以被选择,但是右键却无效,也就是不能复制. 如何才能去除限制,可以复制呢? 02 找到&q ...

  • 网页怎么实现设为首页和加入收藏功能?

    操作方法 01 我们平时在浏览网页的时候,常常看到网站上有"设为首页"或"加入收藏"的按钮,只要点击一下即可将正在浏览的网站设为浏览器首页或者将网站加入到收藏夹 ...

  • JS如何获取屏幕、浏览器及网页高度宽度?

    本篇主要是介绍屏幕尺寸信息.浏览器尺寸信息及HTML页面尺寸信息. 本人新手,下面所写都是经过测试通过的.都是通过及api查到的. 如有错误请指出,谢谢! 操作方法 01 屏幕的尺寸是指当前分辨率下的 ...

  • Photoshop如何自定义裁剪尺寸和分辨率

    工作中经常会用到PS裁剪图片的功能,就是裁剪工具,快捷键是C,可以自定裁剪比例和裁剪尺寸大小. 操作方法 01 第一步:选择裁剪工具(快捷键C) 02 第二步:在选项栏选择"宽X高X分辨率& ...

  • FrontPage教程编辑网页

    现在进入FrontPage.单击任务栏"开始"按钮,选择"程序"选项,单击"Microsoft FrontPage"选项就可以了. 可能你会 ...

  • 怎么设置修改浏览器打开的起始页主页首页

    浏览器是我们使用电脑过程中使用的最频繁的工具之一,我们经常会设置各种各样的主页方便自己在打开浏览器的时候方便访问,那么我们如何设置和修改并锁定自己设置的主页呢? 操作方法 01 打开系统的[控制面板] ...

  • 淘宝手机端首页怎么切片

    大家做淘宝手机详情的时候有没有发现,上传后,各种规格不合适,大小不一的问题出现,导致不能正常上传,其他图片也不能用了,要全部重新切片 操作方法 01 首先我们要知道手机的详情最小的单位是2*2格数的4 ...

  • 怎么在网页中插入视频

    Dreamweaver 是一款网页设计工具,已经问世很多年了,依然有新手不知道怎么用,这里来介绍下. 操作方法 01 打开软件后,在新建中点击"HTML",将新建一个空白的html ...

  • 网页上的文字看不清楚怎么办

    有时候想在线看哈小说,但是网页上的文字看不清楚,阅读起来很吃力,很影响阅读效果.怎么办呢?让我来告诉你几个方法. 方法1:改变网页的大小 01 第一种原因就是网页太小了,导致字体模糊.可以点击浏览器上 ...