巨文!浏览器自身的BUG —— 不同浏览器在页面缩放状态下的渲染差异分析!让你的网站在iPhone和Android上同样完美!

分享到:

过度追求浏览器兼容其实就是拿不同浏览器开发者的个性或Bug惩罚自己!


前言


Web Developers 往往会因为自己的作品无法“完美兼容”多个浏览器而苦恼不已,然后责怪自己水平不够或者MSIE把你惯坏毒害了以至于无法写出“标准的HTML+CSS+JS”!
 

但事实上,很多所谓的兼容性问题未必都是 Web Developer 自己造成的,也会有浏览器本身的问题!毕竟浏览器开发商也是人,也会犯错误,他们的软件同样会有Bug,唯一不同的是,他们所犯的错误往往会“惩罚”和困扰数以千万计的下游Web开发者!
 

当然了,话说回来,就算浏览器自己犯了错误,也不能作为 Web Developer 不去考虑兼容性的借口,毕竟你不能告诉网站用户“您眼前的页面显示不完美现象将会在下一版本的Firefox/Opera/Chrome中得到解决,请耐心等待新版本的发布……”,开个玩笑:)


因此研究不同浏览器各自的特点及其所犯错误的表现总是有必要的。


下面说说我怎么会想到研究这个问题的。


目前正在开发的网站产品对用户体验和交互水准要求比较高,网站会用到许多有特色的自定义控件,然后在我对这些控件进行封装(采用 jQuery plugin 的形式)的时候遇到了一系列浏览器兼容方面的问题。


事实上这已经不是单纯的浏览器兼容性问题了,而是浏览器自身对同样的Html+CSS代码渲染时出现了问题(问题看似小问题,但是对实际应用中的用户界面破坏很严重)。具体说就是:


当用户进行页面缩放浏览的时候,即便同一个浏览器软件,在不同缩放比例下渲染出的效果也是不一致的,会出现各种各样的毛病,造成讨厌的视觉效果破坏。


然后为了彻底解决这种类型的问题及其造成的破坏,我不得不从根本上去找原因,找解决方案,于是就有了这篇文章。



一、遇到问题的jQuery插件


上面提到我在开发时遇到问题的 jQuery plugin 之一是一个“庸俗的” Button ,说它庸俗是因为这样的插件目前在 jQuery 的世界里至少已经有数以万计了,但是我却还是没能找到一个真正完美的,或者说能让我满意的,也许骨子里的真正原因是人都更希望使用自己可控制的东西吧。


简单介绍一下这个 Button plugin :为了支持丰富的视觉效果和更容易在页面中进行控制,我采用Div来模拟一个“四态(normal,hover,pressdown,disabled)按钮”,你只需要通过改变CSS,就可以创建出简洁的文本按钮,通过CSS结合使用背景图片更能够模拟出各种独具特色的按钮形态,关于它,后面我会另开文章介绍,这里就不罗嗦了。


严格来说,一个具有通用性的按钮应当采用九宫格的“四角固定,中间区域自动拉伸”模式来进行渲染,这样才能使得按钮可以随意控制高度和宽度,并且在不同尺寸下都能够表现完美,但是 Web 开发有其独特性,我们这个按钮只需要能够满足自动延展宽度就行,故而采用“左中右三段渲染”的方式进行开发。


因此,在这里您只需要记住我们是用3个Div来分别模拟按钮的左中右样式即可。


作为一个按钮,当然不仅仅是模拟一个 Button look Face 那么简单,它还要能够实现形态变化,响应鼠标事件乃至键盘动作,以此来宣示自己的按钮身份并实现相应的功能。然而这些并不是本文的讲述重点,本文只关注外观模拟的部分,完整的 Button Plugin 开发文章,会在今后放出。



二、本文所讨论问题的现实意义
 

肯定有人会觉得,你非要用 Div 去模拟一个 Button 效果,这分明就是自寻烦恼,你这个例子根本不具有代表性,因此也说明不了什么问题。


真的是这样吗?未必见得吧!就算用 Div 模拟 Button 这件事儿本身是我自己闲的蛋疼,可是我总归是在使用 Html+CSS 去实现一个视觉效果,这一点你无法否认吧。而 CSS 对于网页来讲,其作用无非就是帮助页面排版布局,与Html一起为用户展现出友好优雅的视觉效果而已。那么既然在我实现这个视觉效果的时候遇到了问题,别人在实现其他视觉效果的时候同样也会存在问题,我这里是模拟按钮出问题,别人那里就有可能是页面模块对齐出现错位,影响会更大!这就是本文的现实意义所在!


当然了,也许还有善于抓漏洞的朋友会说“你这个所谓的‘不同缩放比例下的渲染效果差异’只有在用户不断改变网页大小的时候才会出现,事实上又会有多少用户会像你一样闲的蛋疼,逮着一个网页缩来放去呢,因此这点小差别一般用户根本就不会有机会感知的到,你这么斤斤计较又是何苦呢?”


聪明!精彩!貌似合情合理且又丝丝入扣!


然而我的答案是这样的:


1、你所描述的情况基本属实,但是这能够成为浏览器渲染页面可以不严谨的借口吗?难道某些浏览器一方面宣称支持这标准那规范,对“不标准”的微软大加鞭挞,另一方面却又对自己要求降低吗?


我就想问一句:
凭什么我写的无错的、且“标准的” CSS 和 HTML ,你们在不同缩放比例下给我渲染出来却不一样?


(抱歉,吐槽到此结束)


2、为了避免有人说我只会讲大道理,给出两个更直观的理由:
 

  • A、现在 iPhone 手机和 Android 智能手机大行其道,对几乎所有网站来讲,使用这类设备上网访问的用户比例已经在不断提升,而且还将持续大幅提升!而目前为止并非所有网站都有能力为用户提供一个移动终端的专用版本(别跟我提 Wap ,玩这种手机的人绝对不会对 Wap 网站感兴趣,因为 Wap 体现不出他们手机的优越性),所以绝大多数这类用户都会用他们的手机浏览器( Safari Mobile 或者 Android 自带的 Webkit 内核的浏览器)来直接访问你的Web网站,而无论 iPhone 还是 Android 上的手机浏览器都有自动缩放页面的功能(当然这是因为手机的屏幕分辨率小),此时缩放后的页面渲染效果就显得至关重要了!比如你网页上一个140像素宽的按钮,经过 iPhone 的缩小适应屏幕宽度之后就只有一点点了,而你想准确的点击操作它的话一般都会进行放大操作,而这时,按钮撕裂了…… 
昵    称:
验证码:

相关文档: