什么是多終端?

成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)服務(wù)團(tuán)隊(duì)是一支充滿著熱情的團(tuán)隊(duì)，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時(shí)竭誠(chéng)為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)把每個(gè)網(wǎng)站當(dāng)做一個(gè)產(chǎn)品來開發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！

多終端就是包括了我們的電腦，手機(jī)，手持式移動(dòng)設(shè)備比如ipad等。

因?yàn)楦黝愒O(shè)備的顯示屏幕大小不一，分辨率不一，最佳可視效果的橫豎設(shè)置也不一樣，所以多終端瀏覽器兼容主要就是學(xué)習(xí)如何讓我們的項(xiàng)目在多終端上呈現(xiàn)相同的顯示效果，它主要涉及到兩塊知識(shí)點(diǎn)。

1、瀏覽器兼容

2、寬高自適應(yīng)

一、瀏覽器兼容

（一）什么是瀏覽器兼容?

在我們的實(shí)際開發(fā)中會(huì)涉及到在多個(gè)瀏覽器比如firefox，opera，chrome，或者IE的多個(gè)版本下進(jìn)行調(diào)試，在不同版本瀏覽器下會(huì)出現(xiàn)顯示效果不一的情況，而瀏覽器兼容就是為了處理這種情況。

瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。負(fù)責(zé)對(duì)網(wǎng)頁語法的解釋(如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用HTML、JavaScript)并渲染(顯示)網(wǎng)頁。 所以，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染(顯示)效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁顯示效果的原因。

主要瀏覽器內(nèi)核有哪些?

1、Trident內(nèi)核代表產(chǎn)品Internet Explorer，又稱其為IE內(nèi)核。Trident(又稱為MSHTML)，是微軟開發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器包括：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

2、Gecko內(nèi)核代表作品Mozilla FirefoxGecko是一套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎。Gecko是最流行的排版引擎之一，僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。

3、WebKit內(nèi)核代表作品Safari、Chromewebkit 是一個(gè)開源項(xiàng)目，包含了來自KDE項(xiàng)目和蘋果公司的一些組件，主要用于Mac OS系統(tǒng)，它的特點(diǎn)在于源碼結(jié)構(gòu)清晰、渲染速度極快。缺點(diǎn)是對(duì)網(wǎng)頁代碼的兼容性不高，導(dǎo)致一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。

4、Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動(dòng)態(tài)功能，例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版。

5、Blink由Google和Opera Software開發(fā)的瀏覽器排版引擎，2013年4月發(fā)布。

CSS Bug、CSS Hack和Filter

CSS Bug：CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.

CSS Hack：CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗鼈兌紝儆趥€(gè)人對(duì)CSS代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch(補(bǔ)丁)來描述這種行為。

Filter：表示過濾器的意思，它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，F(xiàn)ilter是一種用來過濾不同瀏覽器的Hack類型。

常見CSS解析Bug及hack

圖片間隙：主要解決插入圖片之后在圖片下方多出3像素的問題

雙倍浮向：當(dāng)Ie6及更低版本瀏覽器在解析浮動(dòng)元素時(shí)，會(huì)錯(cuò)誤地把浮向邊界加倍顯示。

默認(rèn)高度：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度。

表單元素行高不一致：?jiǎn)卧匦懈邔?duì)齊方式不一致。

按鈕元素默認(rèn)大小不一：各瀏覽器中按鈕元素大小不一致。

百分比bug：在IE6及以下版本中在解析百分比時(shí)，會(huì)按四舍五入方式計(jì)算從而導(dǎo)致50%加50%大于100%的情況。

鼠標(biāo)指針bug：cursor屬性的hand屬性值只有IE瀏覽器識(shí)別，其它瀏覽器不識(shí)別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識(shí)別該聲明。

透明屬性：IE低版本瀏覽器只能使用filter設(shè)置透明度，IE高版本瀏覽器及其他瀏覽器要用opacity來設(shè)置。

（二）過濾器(filter)

1、下劃線過濾器

當(dāng)在一個(gè)屬性前面增加了一個(gè)下劃線后，由于符合標(biāo)準(zhǔn)的瀏覽器不能識(shí)別帶有下劃線的屬性而忽略了這個(gè)聲明，但是在IE6及更低版本瀏覽器中會(huì)繼續(xù)解析這個(gè)規(guī)則。

2、!important關(guān)鍵字過濾器

它表示所附加的聲明具有最高優(yōu)先級(jí)的意思。但由于IE6及更低版本不能識(shí)別它，我們可以利用IE6的這個(gè)Bug作為過濾器來兼容IE6和其它標(biāo)準(zhǔn)瀏覽器。

3、*屬性過濾器

當(dāng)在一個(gè)屬性前面增加了*后，該屬性只能被IE7瀏覽器識(shí)別，其它瀏覽器混略該屬性的作用。

二、寬高自適應(yīng)

什么是寬高自適應(yīng)?

我們的項(xiàng)目需要在多終端上顯示，那么大家就會(huì)發(fā)現(xiàn)電腦顯示器，手機(jī)屏幕，平板等，它們的分辨率都不同。我們不可能為了單一顯示而專門做一套規(guī)則，而是需要我們制定地規(guī)則能適應(yīng)各種設(shè)備的顯示，這就涉及到寬高能自動(dòng)適配我們?cè)O(shè)備的顯示屏分辨率，這就是寬高自適應(yīng)。

1、寬度自適應(yīng)

2、元素具備最小高度的自適應(yīng)

3、高度自適應(yīng)

/tupian/20230522/

網(wǎng)站標(biāo)題：html5多終端瀏覽器兼容-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://www.rwnh.cn/article26/icejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)