Web Compatibility debugging

Web compatibility Debugging-process

Writing specifications for high-quality code-out compatibility issues are less likely. So there's a problem to consider if the code structure is not canonical

Compatibility issues Two main reasons:
Compatibility debugging at different resolutions
Compatibility debugging under different browsers

Display resolution and browser market share
Http://tongji.baidu.com/data/browser

QQ simultaneous online number and distribution
Http://im.qq.com/online/index.shtml

Browser categories

International Brand Browser
IE:IE6 7 8 9 10 11
Chrom
Firefox
Safari
Opera

Domestic Cottage Brand Browser
360: Security Edition, fast version
Sogou: Compatible version, high-speed version
Cheetah: Compatible version, high speed version
Travel
Qq
Taobao
Baidu...

Browser kernel
WebKit (Bink): Chrom,opera,safari, cottage brand All-speed browser (most widely used)
Trident:ie Browser, cottage card all compatible browser
Gecko:firefox

Web Compatibility Debugging Process

Note: Web pages must have a document declaration, otherwise prone to compatibility issues, especially IE

Premise: Web pages must be made under the advanced browser, such as Chrome,
When developing a webpage, try to fix the width of the page (960px,980px (recommended), 1000px,1200px .... ）
(If the page width is not fixed (flexible layout/responsive layout needs to be designed specifically), the layout will be misplaced at different resolutions when the page content is complex)
After the completion of the Web page creation:

1:chrome compatibility debugging
Compatibility debugging at different resolutions
1: Web compatibility under your own PC resolution
2: Debug at a smaller resolution than my computer
Reduce browser width height to simulate low-resolution scenarios
If you deform, you need to set the element to a fixed width, height, margin, and other styles
3: Debug at a larger resolution than my computer
Reduce web pages on your browser approximate simulation of high resolution
Note: Just approximate simulation, not exactly the same
Debug results are only used to test the page's large background color and picture, the center layout of the Web module
(After the page debugging is finished, remember to reply to the page scale: ctrl+0)

2: Compatibility debugging under other browsers
The so-called other browsers, narrowly referred to as IE6,IE7,
1: Make a Web page with chrome
2: Use IE to view Web pages
First use the system to bring IE to view the Web page
Then press IE F12, switch different versions of IE to view the webpage (note IE7)
Then use IETester software, simulate IE6 View Web page
(The following steps can be done as needed)
If necessary, install the virtual machine (VIRTUALPC), install the XP system, use the built-in IE6 debug Web page
If necessary, use another browser (international, cottage) to debug the webpage.
3: Use Chrom to do mobile-side debugging

Web Compatibility debugging