如何在移動設備上查看移動內容？

我有一個能在桌面上呈現出色的頁面，其標記與手機的標記完全不同，因爲兩者的設計都不同。如何在移動設備上查看移動內容？

我在現有的桌面標記中添加了額外的<div>。

我使用媒體查詢從桌面切換到手機，通過隱藏移動內容（如果在桌面上查看寬度> 1024），反之亦然。

我還爲移動設備和ipad使用了兩種不同的元標記。

對於移動：去除收縮效應（放大/縮小）

爲iPad：允許收縮效應（放大/縮小）

我通過JavaScript添加此meta標籤，其增加了元移動如果它是移動和平板電腦ipad

現在，當在移動設備上查看頁面時，桌面版會加載幾秒鐘，之後便可看到移動版。

是否有可能我應該能夠首先查看我的手機版本，或者當在手機上查看時只需隱藏桌面版本？

這裏是我的JavaScript代碼來切換元：

var browserdetect = function() { 

    var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile|ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase())); 

    var istablet = (/ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase())); 

    var metaiphone = '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">'; 

    var metaipad = '<meta name="viewport" content="width=1300">'; 

    if(ismobile) { 
     if(!istablet) { 
      if($('body').hasClass('responsive-page')){ 
       $('head').append(metaiphone); 
      }    
     } else { 
      $('head').append(metaipad); 
      // console.log("tab");  
     } 
    } 
}

來源

2013-01-24 ramshinde1992

我不明白爲什麼如果您使用媒體查詢時需要顯示特定版本的網站。從您的描述看，您的媒體查詢應該足以在每個平臺上顯示正確的內容，因爲它已正確設置。關於您的瀏覽器檢測功能，您是否將它稱爲您的頁面中的某個位置？ – darshanags

你說得對，我使用媒體查詢讓我的網站響應，但問題是當第一次在移動設備上加載頁面時，它顯示桌面版本，幾秒鐘後顯示移動版本。我想這是因爲上面提到的javascript代碼檢測哪個是userAgent，如果它是ipad，它會添加不同的元素，反之亦然，因爲哪個頁面最初加載速度慢！ – ramshinde1992

你一切都搞砸了這一點。如果與桌面版本完全不同，您應該只爲移動客戶端提供移動html & css。您應該檢測服務器上的客戶端，並確定哪些html將發送給他們（或將移動客戶端重定向到具有移動版本的其他域）。

媒體查詢的重點是修改現有的html，你必須在不同的設備上工作。您應該閱讀本文以進行快速概述：http://learn.shayhowe.com/advanced-html-css/responsive-web-design

來源

2013-01-24 11:22:25

如何在移動設備上查看移動內容？

回答

相關問題