临睡前把iPhone充了电实验了一下在iOS的Safari中看travel.synyan.net的效果，发现图片撑破了主题，而字体过小，拥挤在左侧，绝壁给常用手机阅读鄙人博客的童鞋带来了不便。怎么解决呢，方法挺简单，找到子主题style.css中的img样式定义，然后加上max-width: 100%;height:auto;。比如Colorlib主题的CSS是这样的：

.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image{
    max-width: 100%;
    height:auto;
}

不过据说IE不能正常解析max-width，回头有Windows Phone的童鞋帮我看一下。

# 写于十一年前，改于三年前。
WordPressCSS

共有 10 条评论

  1. Bigman

    澳大利亚

    兼容各种浏览器真是不容易
    不是号称国内还有很多用户还是IE6

     十一年前 Firefox 30 · Windows 7

    回复

    • S

      江苏
       *

      @Bigman 嗯IE6用户只能任其自生自灭了……

       十一年前 Opera 22 · Windows 7

      回复

  2. Betty

    上海

    那你手机看我模板还自适应吗？

     十一年前 Google Chrome 26 · Windows XP

    回复

    • S

      江苏
       *

      @Betty 适应的。

       十一年前 Opera 22 · Windows 7

      回复

  3. 大肥羊

    广东

    自适应体验挺好的。

     十一年前 Firefox 30 · Windows 7

    回复

    • S

      日本
       *

      @大肥羊 嗯，希望大家都能用上。 🙂

       十一年前 Opera 22 · Windows 7

      回复

  4. Ryu

    广东

    新主题很喜欢！ 🙂

     十一年前 Firefox 30 · Windows XP

    回复

    • S

      江苏
       *

      @Ryu 嗯，花了半个晚上没白费 :mrgreen:

       十一年前 Opera 22 · Windows 7

      回复

  5. 章鱼哥

    北京

    但是你这个有个问题，图片不能等比例缩放，图片会变形。

     十一年前 Google Chrome 31 · Windows 7

    回复

    • S

      江苏
       *

      @章鱼哥 .wp-caption img {
      display: block;
      margin: -2px 0 0 -2px;
      max-width: 98%;
      height:auto;
      }

       十一年前 Chromium 37 · Ubuntu

      回复

       

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注