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

標籤：image   code   width   適應   手機螢幕   渲染   自動   沒有   就會   

百度編輯器中添加的圖片在手機端不能自適應問題
做網站經常要用到百度編輯器，頁面的渲染我們一般用{$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
來源：慕課網

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