由于飞仙锅站点采用bootstrap进行前端显示，从页面框架上已经很好做到适配PC和mobile。

站长今天在用手机浏览网站时，还是发现了超框显示问题，造成浏览器出现横向滚动条：

1. 图片超宽问题：使用ckeditor编辑文章的图片时，可以很方便的设置图片的宽度和高度，但在移动端显示时还是超出了容器的宽度，造成了横向滚动条
2. 链接超宽问题：在PC端看一点问题没有，但在手机上看，长链接也超出容器宽度

下面我给最终的解决办法：

{% block script %}
  <script type="text/javascript" src="/static/zinnia/theme/js/jquery.js"></script>
  <script type="text/javascript" >
    $(window).load(function(){
      $(".hentry img").addClass("img-responsive center-block");
      $(".hentry a").css("word-break","break-all");
    })
  </script>
{% endblock script %}

在base.html模板里面，加入以下代码：

原理是利用jquery找到需要修改的根css，并动态给img和a标签赋值，注意要使用到addClass和css两种方法，具体：

1. addClass是给图片指定bootstrap提class
2. css方法是给a标签动态加style

加完这段代码后，网页在移动端，就有一种“立站，向右看齐”的感觉。

文章虽短，意义很长。