当前位置:首页 > 好文分享 > 织梦移动端内容页图片变形问题解决,织梦手机端自适应?

织梦移动端内容页图片变形问题解决,织梦手机端自适应?

        在手机页面模板里添加图片style标签过滤,去除图片的长宽设置,这样在手机端图片就不会变形了,如下:
 
        在安装调试DEDECMS手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?
 
        一般为了要达到图片自适应屏幕宽度的目的,我们在img标签的样式中定义max-width:100%;height:auto;就可以了,可是这次设置了也没有效果。
 
        通过查看源代码,发现文章中的图片img标签原有的style格式设定没有过滤,从而导致css文件中设置的img样式无效。如下图:
 
织梦移动端内容页图片变形问题解决,织梦手机端自适应?
 
        新版的移动端访问是从根目录的m文件夹底下的php文件访问,调用的模板文件是templets/default/目录底下以“_m.htm"结尾的模板文件。在这里我们需要修改article_article_m.htm。由于我这个网站还有一个image的图集模板,所以我还要需要修改article_image_m.htm,通过preg_replace函数过滤图片的style标签。
 
        在需要修改的模板文件里,查找   <td>{dede:field.body/} {dede:field.vote/} (责任编辑:{dede:adminname/})</td>
        修改为    <td>{dede:field.body function="preg_replace('/style=.+?[*|\"]/i','', @me)"/} {dede:field.vote/} (责任编辑:{dede:adminname/}))</td>
 
        修改完之后保存,再开启页面的时候,查看源代码,style标签的内容已经被过滤掉了,图片已经按比例缩小,不会出现比例失调的状况了。

织梦移动端内容页图片变形问题解决,织梦手机端自适应?

上一篇:来看看这次百度站长平台的升级

下一篇:没有了

    (01-01 08:00)