如果在移動設備上查看，應該如何首先加載移動內容？

Question

我有一個頁面可以很好地呈現在桌面上，其標記與移動設備的標記完全不同，因為兩者的設計都不同。

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

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

我還為移動設備和ipad使用了兩個不同的meta標簽。

對於手機：用於消除捏效果（放大/縮小）

對於ipad：允許捏效果（放大/縮小）

我通過javascript添加了此meta標簽，如果是移動設備，則添加了移動設備的元數據，如果是平板電腦，則添加了ipad的元數據

現在，當在移動設備上查看頁面時，桌面版本會加載幾秒鍾，並且在該移動版本可見之后。

我是否應該能夠首先查看我的移動版本，或者在移動設備上查看時僅隱藏桌面版本？

這是我的JavaScript代碼來切換meta：

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");    
        }
    }
}

Answer 1

您對此事完全錯了。 如果移動html＆css與桌面版本完全不同，則應僅為移動客戶端提供服務。 您應該在服務器上檢測到客戶端，然后決定向其發送哪些html＆css（或將移動客戶端重定向到具有移動版本的其他域）。

媒體查詢的重點是修改必須在不同設備上工作的現有html。 您應該查看這篇文章以獲得快速概述： http : //learn.shayhowe.com/advanced-html-css/sensitive-web-design