舉例說明mobify的工作原理

我一直在看mobify.js網站一段時間，但我不明白使用它的好處。（我難以理解爲什麼要用GrumpyCat圖像替換頁面上的所有圖像？）。舉例說明mobify的工作原理

您能不能請我指出一個清晰明瞭的例子，其中，我可以看到取決於瀏覽器分辨率，我的圖像大小發生了變化。

我也做了以下工作至今： 0包括mobify.js頭中使用的mountains.jpg和forest.jpg形象在我的託管網站信息 1.（該頁面只包含這兩個圖像） 2 。從臺式機，平板電腦（三星Galaxy 10英寸），從Android手機請求頁面。 3.在所有三種情況下，我看到下載了相同的圖像，圖像的大小在所有情況下保持不變。

據我所知，尺寸縮小的魔力無法在飛行中發生，但我該如何實現這一目標？

來源

2015-04-23 Ashwin Tumma

我意識到，脾氣暴躁的貓的例子有點厚臉皮，但同樣的概念適用於解決您的問題。用Grumpy Cat圖像替代圖像，你可以編寫一些邏輯來用低分辨率圖像替換圖像（即mountains-320.jpg和forest-320.jpg）。

使用Mobify.js，您需要在您添加到站點的JavaScript代碼段中編寫適配代碼。因此，要加載移動較小的圖像，你可以在你原有的HTML定義路徑較低分辨率圖像是這樣的：

<img src="mountain.jpg" data-mobile-src="mountain-320.jpg" /> 
<img src="forest.jpg" data-mobile-src="forest-320.jpg" />

然後，在JavaScript片段，您可以修改它來抓取的圖像data-mobile-src屬性，而不是像這樣：

 if (capturing) { 
      // Grab reference to a newly created document 
      Mobify.Capture.init(function(capture){ 
       // Grab reference to the captured document in progres 
       var capturedDoc = capture.capturedDoc; 

       var imgs = capturedDoc.getElementsByTagName("img[data-mobile-src]"); 
       for(var i = 0; i < imgs.length; i++) { 
        var img = imgs[i]; 
        var ogImage = img.getAttribute("x-src"); 
        var mobileImage = img.getAttribute("data-mobile-src"); 
        img.setAttribute("x-src", mobileImage); 
        img.setAttribute("old-src", ogImage); 
       } 

       // Render source DOM to document 
       capture.renderCapturedDoc(); 
      }); 
     }

然後，你會看到移動網站將下載和渲染mountain-320.jpg或forest-320.jpg，但它不會下載mountain.jpg或forest.jpg。

只是出於好奇，你想使用Mobify.js的網站？

來源

2015-04-23 23:07:31

非常感謝您的回覆。但是，我仍然沒有得到預期的產出。在請求筆記本電腦和手機時，在這兩種情況下，我只能看到mountains-320.jpg文件。但是，我想在從筆記本電腦訪問時看到mountains.jpg文件，在從移動設備訪問時會看到mountains-320.jpg。我怎樣才能做到這一點？這裏是我的代碼： https://github.com/ashwintumma23/myMobify/blob/master/index.html –

嗨Ashwin，它現在正在桌面和移動激活，因爲'supportedBrowser'變量是如何獲得組。這是一個正在大多數瀏覽器上傳遞的正則表達式。您需要更新正則表達式以僅在移動瀏覽器上匹配，例如：/ip(hone|od)|android.*(mobile)|blackberry.*applewebkit|bb1\d.*mobile/i –

舉例說明mobify的工作原理

回答

相關問題