使用Moovweb SDK移動優化WordPress博客

Question

什麼是最好的方式來移動優化我的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> 

Answer 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; 
    } 
    } 

Answer 2

我會用@media包括在你的CSS：

@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 */ }