藍色安防器材公司類整站模板

html5響應式網站織夢模板源碼IT網絡工作室織夢網

工業環保工程類企業網站織夢模板(帶手機端)

軟件APP類網站源碼織夢通用型企業網站源碼html

在安裝調試跟版網手機版網站的時候，發現一個問題，圖片無法很好的適應屏幕，寬度可以與屏幕同寬，而高度卻沒有按比例調整，導致圖片看起來像被擠扁了一樣，為什么會這樣呢？

一般為了要達到圖片自適應屏幕寬度的目的，我們在img標簽的樣式中定義max-width:100%;height:auto;就可以了，可是這次設置了也沒有效果。

沒辦法，由于用手機無法查看源代碼，所以就在電腦上打開網站，然后查看源代碼，發現文章中的圖片還是保留了PC網頁img標簽原有的格式設定沒有過濾掉，從而導致css文件中設置的img樣式無效。如下圖：

手機網站一般都會把文章的HTML進行修改，去掉一些復雜的樣式，完成這些操作的代碼是在wap.inc.php文件。

打開wap.inc.php看了一下，發現了問題。由于要過濾掉復雜的html標示，但是還需要保留圖片，所以在過濾的時候，先把整個img標簽給替代掉了，等過濾完之后，又替代回來，這樣就導致了img標簽里面的style 無法被過濾。

原因找到了，辦法也很簡單，我們只需在最后輸出的時候過濾掉style=“”里面的信息，就可以讓我們的自適應樣式設定生效了。在/include/wap.inc.php中添加這句代碼（紅字部分）：

$content = preg_replace("/style=.+?[*|\&;]/i", "", $content);

$content = preg_replace("/&[a-z]{3,10};/isU", ' ', $content);

return $content;

修改完之后保存，再開啟頁面的時候，查看源代碼，style標簽的內容已經被過濾掉了，圖片已經按比例縮小，不會出現比例失調的狀況了。