网站制作剖析:无翻转条的网页页面显示屏颤动状况


网站制作剖析:无翻转条的网页页面显示屏颤动状况


短视頻,自新闻媒体,达人种草1站服务 让前端开发设计方案帮忙出网页页面,上线检测发现网页页面切换之间出現显示屏颤动状况。这适配性难题如何老没处理呢?但细看发现,这并不是适配性难题。而是网页页面无翻转条导致的难题。问前端开发设计方案要处理计划方案,说沒有方法处理。

没法,我仅有自主检索找寻方式。我坚信这些物品并不是难题,1定有方式处理。下面是我寻找的方式,先别笑。

翻转条是甚么?看网页页面右边,留意到没?用Win视窗实际操作系统软件的同学对翻转条不生疏吧。

翻转条1般在显示信息內容超出1屏时才出現翻转条。没超出1屏时1般默认设置不出現翻转条。

而产生显示屏颤动状况,更是由于人眼对同样一部分的网页页面控制模块地区有显著的认知工作能力。例如导航栏一部分,1般整站通用性1个头顶部导航栏。两个网页页面间导航栏一部分移位1个像素都能很显著认知出来。

状况1:网页页面都沒有翻转条

盆友网朋友管理方法网页页面有5个标识,但切换的全过程中发现基本上每一个标识页下面与导航栏的间隔都不1样。奇葩啊。

这里只截图2个显著的网页页面,以下:

 

盆友网-找寻朋友

 

盆友网-通信录

这类状况下将同水平线的标识页统1与头顶部的间隔便可。1个像素都不可以少也不可以多。

状况2:网页页面有一部分沒有翻转条

网页页面1沒有翻转条,网页页面2有翻转条。2个网页页面内都沒有移位状况。但仅有在切换网页页面的情况下才发现头顶部导航栏产生颤动,网页页面2被出現的翻转条向左挪动15个像素。

看盆友网页页面面,以下:

 

盆友网-无翻转条

 

盆友网-有翻转条

看红线间距右边的间距,显著向左偏位。

Google检索只寻找了有关网页页面翻转条的互动设计方案难题,但没谈到我说的这个状况。幸亏在知乎联络到了百度搜索MUX组员MoonMonster ,他给我的回应

这是目前访问器设计方案难题,假如期待简易处理就在自身网站上自定1个自始至终出現的翻转条吧。

SO,我沒有寻找意想不到的回答。也只能这样笨方法处理了。

看Google主页右边固定不动了翻转条:

 

Google主页

年后最终1天,写下这篇blog。呵呵。

祝福各位同学新春开心

除非注明:文章内容均为Gauin原創,欢迎转载!转载请注明本文详细地址,感谢!

本文详细地址:


相关阅读