网页兼容性调试-流程
写作规范高质量的代码出兼容性问题的可能性较小。所以出了问题要考虑是否代码结构不规范
兼容性问题两大原因:
不同分辨率下的兼容性调试
不同浏览器下的兼容性调试
显示器分辨率和浏览器市场份额
http://tongji.baidu.com/data/browser
QQ同时在线人数和分布
http://im.qq.com/online/index.shtml
浏览器分类
国际品牌浏览器
IE:ie6 7 8 9 10 11
chrom
firefox
safari
opera
国产山寨牌浏览器
360:安全版,极速版
搜狗:兼容版,高速版
猎豹:兼容版,高速版
遨游
QQ
taobao
百度。。。
浏览器内核
webkit(Bink):chrom,opera,safari,山寨牌所有极速版浏览器(应用最广)
Trident:ie浏览器,山寨牌所有兼容版浏览器
Gecko:firefox
网页兼容性调试流程
注意:网页必须有文档申明,否则容易出现兼容性问题 ,尤其是IE
前提:网页必须在高级浏览器下制作,例如chrome,
开发网页时候,尽量固定页面宽度(960px,980px(推荐),1000px,1200px....)
(如果不固定页面宽度(弹性布局/响应式布局需要专门设计),当页面内容复杂时,不同分辨率下布局会错位)
网页制作完成后:
1:chrome下兼容性调试
不同分辨率下兼容性调试
1:自己电脑分辨率下网页兼容性
2:比我电脑更小的分辨率下调试
缩小浏览器宽度高度来模拟低分辨率情况
如果变形,需要给元素设置固定宽、高、边距等样式
3:比我电脑更大的分辨率下调试
缩小浏览器上的网页近似模拟高分辨率情况
注意:只是近似模拟,不是完全相同
调试结果仅用于测试网页超大背景颜色和图片、网页模块的居中布局情况
(缩小页面调试完成后记得回复页面比例:ctrl+0)
2:其他浏览器下兼容性调试
所谓其他浏览器,狭义指的就是 ie6,ie7,
1:使用chrome制作网页
2:使用ie查看网页
先用本系统自带ie查看网页
再按ie f12,切换ie不同版本查看网页(注意ie7)
再使用ietester软件,模拟ie6查看网页
(下面步骤根据需要可做可不做)
如有必要,本机安装虚拟机(virtualPC),安装xp系统,使用内置ie6调试网页
如有必要,再使用其他浏览器(国际、山寨)调试网页。
3:使用chrom做移动端调试