隨著手機(jī)瀏覽器數(shù)量和網(wǎng)民使用手機(jī)上網(wǎng)比例日漸增多，使用JavaScript開發(fā)的網(wǎng)站也需要考慮手機(jī)瀏覽器的兼容性。其中，圖片自適應(yīng)是一個(gè)非常常見的需求。 舉個(gè)例子，假設(shè)我們有一個(gè)寬度為500px的網(wǎng)頁，其中有一張圖片，寬度為200px。如果用戶使用手機(jī)瀏覽器打開此頁面，圖片就會(huì)顯示為原來的尺寸，需要左右拖動(dòng)才能完全看到圖片。這顯然是不太友好的，所以我們需要讓圖片自適應(yīng)手機(jī)瀏覽器的寬度。 我們可以使用以下JavaScript代碼實(shí)現(xiàn)圖片自適應(yīng)： ```javascript window.onload = function() { var images = document.getElementsByTagName('img'); for (var i = 0; i< images.length; i++) { images[i].style.maxWidth = '100%'; images[i].style.height = 'auto'; } }; ``` 這段代碼會(huì)在頁面加載結(jié)束后將所有圖片的`max-width`屬性設(shè)置為100%，讓圖片自適應(yīng)瀏覽器的寬度。同時(shí)，為了保持圖片的比例，我們將圖片的`height`屬性設(shè)置為`auto`，使其高度自動(dòng)調(diào)整。 我們可以將這段代碼封裝成一個(gè)函數(shù)，方便重復(fù)使用： ```javascript function adaptImages() { var images = document.getElementsByTagName('img'); for (var i = 0; i< images.length; i++) { images[i].style.maxWidth = '100%'; images[i].style.height = 'auto'; } } window.onload = function() { adaptImages(); }; ``` 現(xiàn)在，我們需要考慮手機(jī)瀏覽器的兼容性。一些較老版本的瀏覽器可能不支持`max-width`屬性和`height`的值為`auto`。我們可以使用以下代碼進(jìn)行判斷和修復(fù)： ```javascript function adaptImages() { var images = document.getElementsByTagName('img'); for (var i = 0; i< images.length; i++) { if (images[i].currentStyle) { var maxWidth = images[i].currentStyle['max-width']; if (!maxWidth || maxWidth === 'none') { images[i].style.width = '100%'; } } else if (window.getComputedStyle) { var maxWidth = document.defaultView.getComputedStyle(images[i], null).getPropertyValue('max-width'); if (!maxWidth || maxWidth === 'none') { images[i].style.width = '100%'; } } images[i].style.maxWidth = '100%'; images[i].style.height = 'auto'; } } ``` 這段代碼在判斷瀏覽器是否支持`currentStyle`或者`getComputedStyle`方法后，獲取圖片的`max-width`屬性值，并判斷是否為`none`。如果是，就將圖片的`width`屬性設(shè)置為100%。 需要注意的是，這段代碼獲取的`max-width`屬性值可能帶有單位，如px、em等。我們需要將其去掉，只保留數(shù)值部分。 最后，我們需要考慮圖片加載時(shí)的自適應(yīng)。如果圖片已經(jīng)加載完成，我們可以在`window.onload`事件中直接調(diào)用`adaptImages`函數(shù)。但如果圖片尚未加載完成，我們需要在圖片加載時(shí)動(dòng)態(tài)地調(diào)用`adaptImages`函數(shù)。 我們可以使用以下代碼實(shí)現(xiàn)圖片加載時(shí)的自適應(yīng)： ```javascript function adaptImages() { var images = document.getElementsByTagName('img'); for (var i = 0; i< images.length; i++) { if (images[i].complete) { if (images[i].currentStyle) { var maxWidth = images[i].currentStyle['max-width']; if (!maxWidth || maxWidth === 'none') { images[i].style.width = '100%'; } } else if (window.getComputedStyle) { var maxWidth = document.defaultView.getComputedStyle(images[i], null).getPropertyValue('max-width'); if (!maxWidth || maxWidth === 'none') { images[i].style.width = '100%'; } } images[i].style.maxWidth = '100%'; images[i].style.height = 'auto'; } else { images[i].onload = function() { adaptImages(); }; } } } window.onload = function() { adaptImages(); }; ``` 這段代碼會(huì)在頁面加載完成后遍歷所有圖片，如果圖片已經(jīng)加載完成，就直接調(diào)用`adaptImages`函數(shù)，否則就為圖片綁定`onload`事件，在圖片加載完成后調(diào)用`adaptImages`函數(shù)。 以上就是使用JavaScript實(shí)現(xiàn)圖片自適應(yīng)的方法，希望對(duì)你有所幫助。