0

我有一个在桌面上呈现良好的页面，其标记与移动设备的标记完全不同，因为两者的设计不同。

<div>我在现有的桌面标记中添加了额外内容。

我使用媒体查询从桌面切换到移动，如果在桌面（宽度> 1024）中查看，则隐藏移动内容，反之亦然。

我还为移动设备和 ipad 使用了两种不同的元标记。

对于移动设备：用于消除捏合效果（放大/缩小）

对于 ipad：允许捏合效果（放大/缩小）

我通过 javascript 添加这个元标记，如果它是移动设备，则为移动设备添加元标记，如果是平板电脑，则为 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");    
        }
    }
}
4

1 回答 1

1

你在这件事上完全错了。如果它与桌面版本完全不同，您应该只为您的移动客户端提供移动 html&css。您应该在服务器上检测客户端并决定发送哪些 html&css（或将移动客户端重定向到具有移动版本的不同域）。

媒体查询的重点是修改您必须在不同设备上工作的现有 html。您应该查看这篇文章以获得快速概述：http ://learn.shayhowe.com/advanced-html-css/responsive-web-design

于 2013-01-24T11:22:25.613 回答