百度富文本自适应手机屏幕方法

Posted 2020-10-11

百度编辑器中添加的图片在手机端不能自适应问题
做网站经常要用到百度编辑器，页面的渲染我们一般用{$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
来源：慕课网