使ç¨ç¨æ·ä»£çåæ®µè¿è¡æµè§å¨æ£æµ
为ä¸åæµè§å¨æä¾ä¸åçç½é¡µææå¡é常æ¯ä¸ä¸ªå主æãäºèç½çæ¬ææ¯è®©ä»»ä½äººé½å¯ä»¥è®¿é®ï¼æ 论ä»ä»¬ä½¿ç¨åªä¸ªæµè§å¨æè®¾å¤ãæä¸äºæ¹æ³å¯ä»¥æ ¹æ®åè½çå¯ç¨æ§è䏿¯é对ç¹å®çæµè§å¨æ¥å¼åä½ çç½ç«ä»¥éæ¥å¢å¼ºèªèº«ã
使µè§å¨åæ åå¹¶ä¸å®ç¾ï¼ä»ç¶éè¦æ£æµæµè§å¨çä¸äºè¾¹ç¼æ åµã使ç¨ç¨æ·ä»£çæ£æµæµè§å¨çèµ·æ¥å¾ç®åï¼ä½æ¯åå¾å¾å¥½ï¼å®é 䏿¯ä¸ä¸ªé常å°é¾çé®é¢ãæ¬ææ¡£å°æå¯¼ä½ å°½å¯è½æ£ç¡®å°è¿è¡æ¤æä½ã
夿³¨ï¼å¼å¾éç³çæ¯ï¼ä½¿ç¨ç¨æ·ä»£çå æ¢å¾å°ä¼æä¸ºä¸ä¸ªå¥½ä¸»æãä½ å 乿»è½åç°ä¸ä¸ªæ´å¥½çãæ´å¹¿æ³å ¼å®¹çæ¹å¼æ¥è§£å³ä½ çé®é¢ã
å¨ä½¿ç¨æµè§å¨æ£æµä¹åéè¦èèçä¸äºäºæ
å½ä½ èè使ç¨ç¨æ·ä»£çåæ®µæ¥æ£æµç¨æ·æ£å¨ä½¿ç¨åªç§æµè§å¨çæ¶åï¼ç¬¬ä¸æ¥æ¯è¯çåé¿å®ã仿³æç½ä½ 为ä»ä¹è¦è¿æ ·åå¼å§ã
- ä½ æ£å°è¯è§£å³æä¸ªæµè§å¨çæä¸ªçæ¬ä¸çä¸ä¸ªç¹å®é误åï¼
-
å¨ä¸ä¸è®ºå䏿¥æ¾ã询é®ï¼ä½ ä¸å¤ªå¯è½æ¯ç¬¬ä¸ä¸ªéå°è¿ä¸ªé®é¢ç人ãä½ ä¹å¯ä»¥è¯¢é®ä¸å®¶ï¼æè ä» ä» æ¯é£äºåä½ ææä¸åè§ç¹ç人们ï¼ä»ä»¬è½æä¾ç»ä½ ä¸åçæè·¯ã妿è¿ä¸ªé®é¢çä¸å»æ¯ä¸å¸¸è§çï¼ä½ éè¦æ£æ¥ä¸ä¸æ¯å¦è¿ä¸ªé误已ç»éè¿é误è·è¸ªç³»ç» (Mozilla; WebKit; Opera) æ¥åç»æµè§å¨ååãæµè§å¨å¼ååéå¸¸å ³æ³¨é误æ¥åï¼ç¸å ³çåæä¹å¯è½ä¼æå ¶ä»è§£å³æ¹æ¡çæç¤ºã
- ä½ æ£å°è¯æ£æ¥æä¸ªç¹æ§æ¯å¦å¯ç¨åï¼
-
ä½ çç«ç¹éè¦ä½¿ç¨ä¸ä¸ªç¹å®çç½é¡µç¹æ§ï¼ç¶èæä¸äºæµè§å¨è¿ä¸æ¯æè¯¥ç¹æ§ï¼ä½ æ³åç»é£äºä½¿ç¨ä¸æ¯æè¯¥ç¹æ§çæµè§å¨çç¨æ·ä¸ä¸ªæ´èçç½é¡µï¼è¯¥ç½é¡µææ´å°çç¹æ§ï¼ä½æ¯ä½ ç¥éä»ä»¬å°æ£å¸¸æ¾ç¤ºãè¿æ¯æç³ç³ç使ç¨ç¨æ·ä»£çæ£æµççç±ï¼å 为æå¾å¤§çæ¦çæç»å ¶ä½çæææµè§å¨é½å°ä½¿ç¨è¿ä¸ªç¹æ§ãä½ åºè¯¥å°½ä½ æå¤§åªåå¨è¿ç§å¯è½æ åµä¸é»æ¢ä½¿ç¨ç¨æ·ä»£çå æ¢å¨ï¼ä½ä¸ºæ¿ä»£ï¼ä½¿ç¨åè½æ£æµå¨ã
- ä½ æ³ä¾æ®æ£å¨ä½¿ç¨çæ¯åªä¸ªæµè§å¨æ¥æä¾ä¸åç HTML 页é¢åï¼
-
è¿é常æ¯ä¸ä¸ªåçåæ³ï¼ä¸è¿æäºæ åµä¸è¿åæ¯å¿ è¦çãå¨è¿äºæ å½¢ä¸ï¼ä½ é¦å åºè¯¥åæä½ æå¤çæ 形并确å®è¿ç¡®å®æ¯å¿ è¦çãä½ æ¯å¦å¯ä»¥éè¿æ·»å ä¸äºæ è¯ä¹ç
<div>æè<span>å ç´ æ¥é¿å å¢ï¼æ³æå使ç¨ç¨æ·ä»£çæ£æµæ¯å°é¾çï¼å¼å¾çºç²ä¸äº HTML çæ´æ´æ§æ¥æ¢åãå¦å¤ï¼ä¹è¯·éæ°æèä¸ä¸ä½ ç设计ï¼è½å¦éè¿ä½¿ç¨æ¸è¿å¢å¼ºæè æµä½å¸å±æ¥å»é¤ä½¿ç¨ç¨æ·ä»£çæ£æµçéè¦å¢ï¼
é¿å è¿è¡ç¨æ·ä»£çæ£æµ
å¦æä½ æ³è¦å°è¯é¿å 使ç¨ç¨æ·ä»£çæ£æµï¼å¨æäºæ 形䏿äºå¯ä¾éæ©çæ¹æ³ã
- åè½æ£æµ
-
使ç¨åè½æ£æµï¼ä½ ä¸éè¦å¼æ¸ æ¥æ¯åªç§æµè§å¨æ£å¨æ¸²æä½ ç页é¢ï¼ä½ åªéè¦æ£æµä½ éè¦çæä¸ªç¹å®åè½æ¯å¦å¯ç¨å³å¯ãå¦æè¯¥åè½ä¸å¯ç¨ï¼ä½¿ç¨ä¸ä¸ªåºåçç¥ãç¶èï¼å¨æäºç½è§çæ å½¢ä¸ï¼ä½ ç¡®å®éè¦æ£æµæµè§å¨ç§ç±»ï¼ç±äºå ¶ä»æµè§å¨ä¹ä¼å¨å°æ¥ä»¥ä¸åæ¹å¼å®ç°è¿ä¸ªåè½ï¼ç»ä¸è¦ä½¿ç¨åè½æ£æµæ¥å¤æãç±æ¤é æçé误å°é常é¾åç°åä¿®å¤ã
- æ¸è¿å¢å¼º
-
è¿ç§è®¾è®¡ææ¯æ¶åäºæç §â屿¬¡âå¼åç½é¡µï¼ä½¿ç¨èªåºåä¸çæ¹æ³ï¼ä»ä¸ä¸ªç®åç屿¬¡å¼å§ï¼å¨ä¸ç³»åè¿ç»ç屿¬¡ä¸éè¿ä½¿ç¨æ´å¤çåè½æ¥éæ¥æåç«ç¹çè½åã
- ä¼é é级
-
è¿æ¯ä¸ç§èªé¡¶åä¸çæ¹å¼ï¼å¨æå»ºå¯è½æå¥½çç«ç¹æ¶ä½¿ç¨ææä½ æ³è¦çåè½ï¼ç¶åç¨å¾®æ¹è¿ä½¿å ¶è½å¨æ´èçæ¬çæµè§å¨ä¸å·¥ä½ã䏿¸è¿å¢å¼ºçæ¹æ³ç¸æ¯ï¼è¿ç§æ¹æ³å¯è½æ´å°é¾ãæçæ´ä½ï¼ä¸è¿å¨ä¸äºæ æ¯ä¸ä¹è®¸æ¯ææçã
ç¨æ·ä»£çä¸çåªä¸ªé¨åå å«ä½ æ£å¨å¯»æ¾çä¿¡æ¯
ç±äºç¨æ·ä»£çå串çä¸åé¨å缺ä¹ç»ä¸æ§ï¼è¿æ¯ä¸ä¸ªè¾é¾å¯¹ä»çé®é¢ã
æµè§å¨å
å½äººä»¬è¯´ä»ä»¬æ³è¦è¿è¡âæµè§å¨æ£æµâçæ¶åï¼ä»ä»¬å®é ä¸ç»å¸¸æ³è¦è¿è¡çæ¯â渲æå¼ææ£æµâãä½ å®é 䏿³è¦æ£æµä½¿ç¨çæ¯ç«çï¼Firefoxï¼è¿æ¯ä¸ä¹å¯¹åºçæµ·ç´ï¼SeaMonkeyï¼ï¼æè 使ç¨çæ¯ Chrome è¿æ¯ä¸ä¹å¯¹åºç Chromiumï¼æè ä½ å®é ä¸åªä¸è¿æ³çæµè§å¨æ¯å¦æ£å¨ä½¿ç¨ Gecko è¿æ¯ WebKit 渲æå¼æï¼å¦æè¿æ£æ¯ä½ éè¦çï¼è¯·åé åé¢çé¨åã
é¤äº IE æµè§å¨è¿ä¸ªæ¾èçä¾å¤ï¼å¤§é¨åçæµè§å¨ä»¥æµè§å¨å/çæ¬å·çæ ¼å¼è®¾ç½®æµè§å¨ååçæ¬ã使¯ç±äºæµè§å¨å䏿¯ç¨æ·ä»£çå符串ä¸å¯ä¸ä¸ä¸ªä»¥è¿ç§æ ¼å¼å½åçä¿¡æ¯ï¼ä½ ä¸è½åç°æµè§å¨åï¼ä½ åªè½æ£æµæ¯å¦è¿æ¯ä½ æ£å¨å¯»æ¾çååã使¯è¦æ³¨æå°ï¼ä¸äºæµè§å¨å¨è¯´è°ï¼ä¾å¦ Chrome çç¨æ·ä»£çåç¬¦ä¸²ä¸æ¢ä¼å å« Chrome åä¼å å« Safariãæä»¥ä¸ºäºæ£æµ Safari æµè§å¨ï¼ä½ ä¸å¾ä¸æ£æµå ¶ä¸æ¯å¦æ Safari åç¬¦ä¸²åæ¶æ²¡æ Chrome å符串ï¼Chromium ä¹ç»å¸¸æ±æ¥å®èªå·±æ¯ Chrome æµè§å¨ï¼æµ·ç´ææ¶ä¹æ±æ¥å®èªå·±æ¯ç«çæµè§å¨ã
ä¹è¦æ³¨æä¸è¦å¯¹æµè§å¨å使ç¨ç®åçæ£å表达å¼ï¼ç¨æ·ä»£çå符串ä¸ä¹å å«ä¸å±äºé®å¼å¯¹å½¢å¼çå符串ãä¾å¦å¨ Safari å Chrome ä¸å 嫿âlike Geckoâ䏿 ·çå符串ã
| å¿ é¡»å å« | ç¦æ¢å å« | ||
|---|---|---|---|
| Firefox | Firefox/xyz | Seamonkey/xyz | |
| Seamonkey | Seamonkey/xyz | ||
| Chrome | Chrome/xyz | Chromium/xyz | |
| Chromium | Chromium/xyz | ||
| Safari | Safari/xyz | Chrome/xyz or Chromium/xyz | Safari æä¸¤ä¸ªçæ¬å·ï¼ä¸ä¸ªææ¯æ§è¾å¼ºï¼æ ¼å¼æ¯ Safari/xyzï¼ä¸ä¸ªå¯¹ç¨æ·å好ä¸ç¹ï¼æ ¼å¼æ¯ Version/xyz |
| Opera | OPR/xyz [1]Opera/xyz [2] | [1] Opera 15+ (åºäº Blink ç弿)[2] Opera 12- (åºäº Presto ç弿) | |
| Internet Explorer | ; MSIE xyz; | IE æµè§å¨çåå并没æä½¿ç¨BrowserName/VersionNumberçæ ¼å¼ |
å½ç¶ï¼è¿é并没æä¿è¯å ¶ä»æµè§å¨ä¸å«æä¸è¿°å符串ï¼åå¨è¿å»ï¼Chrome å«æäº Safari çå符串ï¼ãè¿å°±æ¯ä¸ºä»ä¹ä½¿ç¨ç¨æ·ä»£çåæ®µè¿è¡æµè§å¨æ£æµæ¯ä¸å¯ä¿¡çï¼å¹¶ä¸åè¿ä¸ªæ£æµä¹ä» ä» åºè¯¥æ¯ä¸ºäºæ£æµçæ¬å·ï¼å«æè¿å»ççæ¬å·è¿ç§äºæ å¾å°åçï¼ã
æµè§å¨çæ¬
æµè§å¨çæ¬å·é常ä½å¹¶ä¸æ»æ¯åºç°å¨ç¨æ·ä»£çåç¬¦ä¸²çæµè§å¨å/çæ¬å·è®°å·çå¼çä½ç½®ãIE æµè§å¨ï¼è¯¥æµè§å¨æ¾ç½®çæ¬å·åå¥½å¨ MSIE è®°å·ä¹åï¼ä»¥åå¨çæ¬ 10 ä¹åç Operaï¼æ°å¢äºçæ¬/çæ¬å·æ è®°ï¼å°±æ¯ä¾åã
æ¤å¤å䏿¬¡å¼ºè°ï¼ç±äºå¹¶æ²¡æä¿è¯å ¶ä»æ è®°ä¼å 嫿æçæ°åï¼è¯·ç¡®ä¿éåä½ æ£å¨å¯»æ¾çæµè§å¨çæ£ç¡®çæ è®°ã
渲æå¼æ
æ£å¦æ©å æåå°çï¼å¨å¤§å¤æ°æ åµä¸ï¼å¯»æ¾æ¸²æå¼ææ¯ä¸ä¸ªæ´å¥½çæ¹å¼ãè¿å°æå©äºä¿çé²ä¸ºäººç¥çæµè§å¨ã使ç¨å ±åçæ¸²æå¼æçæµè§å¨å°ä»¥ç¸åçæ¹å¼æ¾ç¤ºé¡µé¢ï¼è¿ç»å¸¸æ¯ä¸ä¸ªå ¬å¹³çå设ï¼ä¸å¤ææï¼å¤å¤ææã
ç°å¨å¸é¢ä¸æ 5 个主æµç渲æå¼æï¼Tridentï¼Geckoï¼Prestoï¼Blink å WebKitãç±äºå æ¢æ¸²æå¼æåæ¯å¾æ®éçï¼å¤§éçç¨æ·ä»£çå¨å ¶å段ä¸å¢å å ¶ä»ç渲æå¼æåæ¥è§¦åæ£æµãå æ¤å½æ£æµæ¸²æå¼æçæ¶åï¼ä¸ä»¶å¾éè¦çäºæ ï¼å°±æ¯è¦é¿å âå鳿§âï¼æ³¨ï¼false-positivesï¼æä¸ä¸ªç¹æ§å¯éè¿æ£æµï¼ä½å®é å¨è¯¥æµè§å¨ä¸å¹¶ä¸å¯é æä¸å¯ç¨ï¼æ åµçåçã
| å¿ é¡»å å« | ||
|---|---|---|
| Gecko | Gecko/xyz | |
| WebKit | AppleWebKit/xyz | 请注æï¼WebKit æµè§å¨å å«äº'like Gecko'å符串ï¼å¦æä¸å 以注æï¼å¯è½ä¼è§¦åæ£æµ Gecko ç false positiveã |
| Presto | Opera/xyz | æ³¨ï¼ å¨ Opera æµè§å¨å¨ 15 å以ä¸ççæ¬ä¸ï¼å·²ç»ä¸åä½¿ç¨ Prestoï¼åè§'Blink'ï¼ã |
| Trident | Trident/xyz | IE æµè§å¨å°æ¤å符串æ¾å¨ User Agent åç¬¦ä¸²çæ³¨éé¨åã |
| Blink | Chrome/xyz |
渲æå¼æçæ¬
é¤äº Gecko è¿ä¸ªæ¾èçä¾å¤ï¼å¤§é¨åçæ¸²æå¼æå°çæ¬å·æ¾ç½®å¨æ¸²æå¼æ/çæ¬å·æ è®°ä¸ãè¯¥å¼æå° Gecko çæ¬å·æ¾ç½®å¨ç¨æ·ä»£ççæ³¨éé¨åï¼å¨ rv å符串ä¹åã卿æºç Gecko14 以忡é¢ç Gecko17 ä¹åï¼è¯¥å¼æä¹å¨ Gecko/version æ è®°å¤æ¾ç½®çæ¬å·çå¼ï¼å åççæ¬ä¸æ¤å¤æ¾ç½®çæ¯æå»ºæ¥æï¼ç¶ååºå®çæ¥æè°ç¨ GeckoTrailï¼ã
æä½ç³»ç»
大夿°çç¨æ·ä»£çå符串ä¹ç»åºäºç¨æ·ä½¿ç¨çæä½ç³»ç»ï¼å°½ç®¡å Firefox OS è¿æ ·çç½ç»ä¸ºä¸å¿çæä½ç³»ç»æ²¡æç»åºï¼ï¼ä½æ¯ç»åºçå½¢å¼å´å¤ç§å¤æ ·ãå¨ç¨æ·ä»£ççæ³¨éé¨å以夹å¨ä¸¤ä¸ªåå·ä¹é´çåºå®å符串形å¼ç»åºãå¯¹äºæ¯ä¸ä¸ªæµè§å¨ï¼è¿äºå符串æ¯ç¹å®çãè¿äºåç¬¦ä¸²å¨æ¾ç¤ºæä½ç³»ç»çåæ¶ï¼ä¹ç»å¸¸æ¾ç¤ºå®ççæ¬åå ¶ä¾èµç硬件信æ¯ï¼32 ä½è¿æ¯ 64 ä½ï¼æè æ¯ Mac å¹³å°ç intel/PPCï¼.
æ£å¦æææ 形䏿 ·ï¼è¿äºå符串å¨å°æ¥ä¹å¯è½ä¼æ¹åï¼æä»¬åºè¯¥ä» ä» ä¸å·²ç»åå¸çæµè§å¨ä¸èµ·ä½¿ç¨å®ä»¬ã彿°çæµè§å¨çæ¬åå¸çæ¶åï¼ä¸ä»½ä¿®æ¹èæ¬ä»¥éåºæ°çæ¬çææ¯è°æ¥å¿ é¡»åºç°ã
ææºãå¹³æ¿æè å°å¼çµè
æ§è¡ç¨æ·ä»£çå æ¢çä¸ä¸ªææ®éçåå æ¯æ¥ææµè§å¨æ¯å¨ä½ç§ç¡¬ä»¶è®¾å¤ä¸è¿è¡çãèè¿ä¹åçç®çæ¯å¯¹ä¸åç±»åçè®¾å¤æä¾ä¸åç HTML 页é¢ã
- ä»ä¸è¦åè®¾ä¸æ¬¾æµè§å¨æè ä¸ç§æ¸²æå¼æä» ä» è¿è¡å¨ä¸ç§ç±»åç设å¤ä¸ãç¹å«æ¯ä¸è¦å¯¹ä¸åç§ç±»çæµè§å¨æè 渲æå¼æéç¨ä¸åçé»è®¤å¼ã
- ä»ä¸è¦ä½¿ç¨ OS æ è®°æ¥å®ä¹æ¯å¦è¯¥æµè§å¨è¿è¡å¨ææºãå¹³æ¿æè æ¡é¢æºä¸ãåä¸ç§æä½ç³»ç»ä¹è®¸ä¹è¿è¡å¨ä¸æ¢ä¸ç§ç±»åç设å¤ä¸ï¼ä¾å¦ï¼Android æ¢è½å¨å¹³æ¿ä¸è¿è¡ä¹è½å¨ææºä¸è¿è¡ï¼ã
ä¸é¢è¿å¼ è¡¨æ ¼æ»ç»äºä¸»è¦æµè§å¨å¼åå声æä»ä»¬çæµè§å¨è¿è¡å¨ææºè®¾å¤ä¸çæ¹å¼ï¼
| æµè§å¨ | è§å | ç¤ºä¾ |
|---|---|---|
| Mozillaï¼GeckoãFirefoxï¼ | 注éä¸ç Mobile æ Tablet æ è®° |
Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0 |
| åºäº WebKitï¼AndroidãSafariï¼ | 注éå¤ç Mobile Safari æ è®° |
Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 |
| åºäº Blinkï¼ChromiumãGoogle ChromeãOpera 15+ãAndroid ç Edgeï¼ | 注éå¤ç Mobile Safari æ è®° |
Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047 |
| åºäº Prestoï¼Opera 12-ï¼ | 注éä¸ç Opera Mobi/xyz æ è®° |
Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50 |
| Windows 10 Mobile ç Edge | 注éå¤ç Mobile/xyz å Edge/ æ è®° |
Mozilla/5.0 (Windows Phone 10.0; Android 6.0.1; Xbox; Xbox One) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Mobile Safari/537.36 Edge/16.16299 |
æ»ä¹ï¼æä»¬å»ºè®®æ£æµç§»å¨è®¾å¤çæ¶åï¼å¨ç¨æ·ä»£çå符串ä¸å¯»æ¾âMobiâå符串ã
夿³¨ï¼å¦æè®¾å¤å±å¹è¶³å¤å¤§ï¼å®å°±ä¸ä¼è¢«ç¨âMobiâæ è®°ï¼ä½ åºè¯¥æä¾ç»ç¨æ·ä½ çæ¡é¢çç½é¡µï¼ç±äºè¶æ¥è¶å¤çæ¡é¢è®¾å¤å¼å§é æè§¦æ¸å±ï¼ä½ä¸ºä¸ä¸ªæä½³ä½éªï¼ä¸ç®¡ææ ·ï¼åºè¯¥å¨è¯¥ç½é¡µä¸æä¾è§¦ç¢°è¾å ¥ï¼