使用 Moovweb SDK 移动优化 WordPress 博客答案

【问题标题】：Mobile optimizing a WordPress blog using Moovweb SDK使用 Moovweb SDK 移动优化 WordPress 博客
【发布时间】：2016-12-20 14:07:03
【问题描述】：

什么是移动优化我的 Wordpress 博客的最佳方式？我的帖子的一般结构是这样的：

<div class="post" id="post-ID">
<div class="top_o_the_post">
        <h2><a href="My URL" rel="bookmark" title="My Title">My Title</a></h2>
        <small>My Sub-title</small>                         
    </div>

    <div class="entry">
        <p>Some Text</p>
        <p>More text</p>
        <p>Some more text<br>
        <table class="pics">
        <tbody><tr>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
        </tr>
        </tbody></table>
    </div>
</div>

【问题讨论】：

标签： wordpress moovweb

【解决方案1】：

如果您安装了某种图像预设创建模块，您可以制作适合移动设备（更小、更轻）的图像预设，然后通过修改 SRC 将这些图像提供给移动客户端。在你的示例代码转换看起来像这样：

 $(".//table[@class='pics']") {
    $(".//img"){
        remove("@width")
        remove("@height")
        attribute("src"){
           value(){
              replace("desktop-folder-name", "mobile-folder-name")
           }
        }
     }
 }

此外，让图像响应各种屏幕尺寸也是一个好主意。所以在你的 SCSS 中你会想要这样的东西：

  .pics{
     img{
         width: 90%;
         max-width: 480px;
         display: block;
         margin: 10px auto;
     }
  }

【讨论】：

【解决方案2】：

我会在你的 CSS 中使用 @media 包含：

@media screen and (min-width: 600px) { .entry{ width:"600px" } }

@media screen and (min-width: 900px) { .entry{ width:"900px" } }

您还可以通过以下方式自动缩放所有图像：

img { max-width: 100%; height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ }

【讨论】：