如果在移动设备上查看，应该如何首先加载移动内容？

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