1. 程式人生 > >百度富文本自適應手機屏幕方法

百度富文本自適應手機屏幕方法

不能 設置 log 限制 寬度 縮放 我們 渲染 www.

百度編輯器中添加的圖片在手機端不能自適應問題
做網站經常要用到百度編輯器,頁面的渲染我們一般用{$content}來顯示,這時候在手機端就會出現首先寬度過寬超過手機尺寸的問題,用max-width:100%;限制之後呢又會發現高度還是那麽高,沒有進行等比例縮放,找了下度娘下面列一下解決方法:
經過調試發現,<img>標簽中的style就是影響移動端自適應的問題所在。將整個style刪除後,既不會影響PC端圖片大小,也會使自適應恢復。
百度編輯器呢會自動把添加的圖片設置寬高屬性,所以我們要把這兩行代碼幹掉——找到js所在位置ueditor/ueditor/dialogs/image,找到image.js文件,打開編輯,第272行和279行分別設置了寬高屬性,將其屏蔽即可style: "width:" + data[‘width‘] + "px;height:" + data[‘height‘] + "px;"


然後在頁面稍加限制
<div class="test"> {$content} </div> <style> .test img{display:block;max-width:100%;height:auto;} </style>
作者: 小築
鏈接:http://www.imooc.com/article/13297
來源:慕課網

百度富文本自適應手機屏幕方法