花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來到素材無憂網(wǎng),按 + 收藏我們
登錄 注冊 退出 找回密碼

DedeCMS手機wap網(wǎng)站圖片自適應(yīng)bug修改

時間: 2020-08-20 14:32 閱讀: 作者:素材無憂網(wǎng)

在安裝調(diào)試跟版網(wǎng)手機版網(wǎng)站的時候,發(fā)現(xiàn)一個問題,圖片無法很好的適應(yīng)屏幕,寬度可以與屏幕同寬,而高度卻沒有按比例調(diào)整,導(dǎo)致圖片看起來像被擠扁了一樣,為什么會這樣呢?

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

沒辦法,由于用手機無法查看源代碼,所以就在電腦上打開網(wǎng)站,然后查看源代碼,發(fā)現(xiàn)文章中的圖片還是保留了PC網(wǎng)頁img標簽原有的格式設(shè)定沒有過濾掉,從而導(dǎo)致css文件中設(shè)置的img樣式無效。

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

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

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

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

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

return $content;

 

修改完之后保存,再開啟頁面的時候,查看源代碼,style標簽的內(nèi)容已經(jīng)被過濾掉了,圖片已經(jīng)按比例縮小,不會出現(xiàn)比例失調(diào)的狀況了。

版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!

轉(zhuǎn)載請注明: DedeCMS手機wap網(wǎng)站圖片自適應(yīng)bug修改

標簽:  
相關(guān)文章
模板推薦