Question

我有一个桌面宽度为＆gt的响应式网站; 980px和移动宽度＆lt; 768px。我希望平板电脑能够在980px视口中查看网站，但移动设备可以在设备宽度上查看。

具体来说，我想要以下内容：

width = device width
if width >= 768px
  viewport = 980px
else
  viewport = width

解决此问题的最佳方法是什么？我不想检查服务器上的useragent。

Answer 1

据我所知，你想这样做：

$(document).ready(function() {

    // lets push in a viewport 
    var vpw = (screen.width>=768)?'980':'device-width';
    $('head').prepend('<meta name="viewport" content="width='+vpw+'" />');

});

从我测试的结果来看，这是有效的。（这有点好笑，因为视口是在文档'加载'后写的;你可能会在屏幕上看到一点跳跃，而YMMV。）

- 编辑现在我只是把这段代码写在脑袋里，就像这样

<head>
  <script type="text/javascript">
    var vpw = (screen.width>=768)?'980':'device-width';
    document.write('<meta name="viewport" content="width='+vpw+'" >');
  </script>
</head>

这是monaca所做的，所以我猜它还可以 https://github.com/monaca/monaca.viewport.js/tree/master

Answer 2

您可以使用viewport meta tag和CSS media queries来完成此操作。在您的HTML中：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

在你的CSS中：

@media screen and (min-width: 768px) {
    article {
        width: 980px;
        margin: 0 auto;
    }
}

JSFiddle here

Answer 3

使用它：

<meta name="viewport" content="width=device-width, initial-scale=1"/>

在css中

.container{
   width: 100%;         /* for mobile */
   max-width: 1024px;   /* for pc and tablet */
}

其余的css：搜索媒体查询;）

如果您有移动设备，则容器宽度为100％fullsize。但在pc中最大宽度为1024px。所以你可以用css设计你的其余设计。这不需要javascript或插件。

Answer 4

@media only screen and (min-width: 768px) and (max-width: 980px) { ... }

相应调整。从本质上讲，此代码为“中间”设备（如平板电脑）提供了天花板和楼层值。

您可以通过执行以下操作来强化该窗口以强制使用桌面CSS或大部分内容：

@media only screen and (min-width: 800px) and (max-width: 1024px) { ... }

除了做这样的事情之外，你还要“嗅”这个设备，这会让人想起90年代（imo - 不是那些日子？），或者使用视口元数据。

Answer 5

考虑到移动设备（不是平板电脑）的视口比768小得多，为什么不简单地更新媒体查询以更小的尺寸应用更改？即：

@media only screen and (max-width: 480px) { ... }

这样您的手机样式仅适用于最大宽度为480像素的小型设备。

您的桌面版网站（现在是平板电脑）仍会在这些分辨率上方显示。

Answer 6

你能使用Twitter bootstrap脚手架CSS吗？他们有预先构建的媒体类，你可以稍微调整一下。

http://twitter.github.com/bootstrap/scaffolding.html

我认为这部分最适用于您所谈论的内容

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px)  { ... }

此时，您可以使用设置将流体跨度宽度设置为如下所示

Label               Layout width         Column width     Gutter width
Default             768px and above      42px             20px
Phones to tablets   767px and below      Fluid columns    no fixed widths

注意：由于您将使用固定的列宽，因此div不会缩放到修复列宽度之上。

Answer 7

每当客户想要一个响应式移动版本时我也会这样做，但是在更大的东西上保留默认缩放 - 网络上真的没有太多：为不同的屏幕尺寸设置不同的视口标签，所以使用JS似乎仍然是最好的选择。我默认指定一个无响应的视口宽度，例如

 <meta name="viewport" content="width=1000">

然后尽快运行以下代码（即jQuery加载后立即但不包装jQuery的.ready（）函数或任何等效函数，因为window.screen属性似乎是准确的并且可立即使用。这可以避免稍后运行代码时可能发生的移动设备轻微跳转：

if (window.screen.width < 601) {
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}

Answer 8

(function() {
window.monaca = window.monaca || {};

var IS_DEV = false;
var d = IS_DEV ? alert : function(line) { console.debug(line); };

/**
 * Check User-Agent
 */
var isAndroid = !!(navigator.userAgent.match(/Android/i));
var isIOS     = !!(navigator.userAgent.match(/iPhone|iPad|iPod/i));

var defaultParams = {
    width : 640,
    onAdjustment : function(scale) { }
};

var merge = function(base, right) {
    var result = {};
    for (var key in base) {
        result[key] = base[key];
        if (key in right) {
            result[key] = right[key];
        }
    }
    return result;
};

var zoom = function(ratio) {
    if (document.body) {
        if ("OTransform" in document.body.style) {
            document.body.style.OTransform = "scale(" + ratio + ")";
            document.body.style.OTransformOrigin = "top left";
            document.body.style.width = Math.round(window.innerWidth / ratio) + "px";
        } else if ("MozTransform" in document.body.style) {
            document.body.style.MozTransform = "scale(" + ratio + ")";
            document.body.style.MozTransformOrigin = "top left";
            document.body.style.width = Math.round(window.innerWidth / ratio) + "px";
        } else {
            document.body.style.zoom = ratio;
        }
    }
};

if (isIOS) {
    monaca.viewport = function(params) {
        d("iOS is detected");
        params = merge(defaultParams, params);
        document.write('<meta name="viewport" content="width=' + params.width + ',user-scalable=no" />');
        monaca.viewport.adjust = function() {};
    };
} else if (isAndroid) {
    monaca.viewport = function(params) {
        d("Android is detected");
        params = merge(defaultParams, params);

        document.write('<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi" />');

        monaca.viewport.adjust = function() {
            var scale = window.innerWidth / params.width;
            monaca.viewport.scale = scale;
            zoom(scale);
            params.onAdjustment(scale);
        };

        var orientationChanged = (function() {
            var wasPortrait = window.innerWidth < window.innerHeight;
            return function() {
                var isPortrait = window.innerWidth < window.innerHeight;
                var result = isPortrait != wasPortrait;
                wasPortrait = isPortrait;
                return result;
            };
        })();

        var aspectRatioChanged = (function() {
            var oldAspect = window.innerWidth / window.innerHeight;
            return function() {
                var aspect = window.innerWidth / window.innerHeight;
                var changed = Math.abs(aspect - oldAspect) > 0.0001;
                oldAspect = aspect;

                d("aspect ratio changed");
                return changed;
            };
        });

        if (params.width !== 'device-width') {
            window.addEventListener("resize", function() {
                var left = orientationChanged();
                var right = aspectRatioChanged();

                if (left || right) {
                    monaca.viewport.adjust();
                }
            }, false);
            document.addEventListener('DOMContentLoaded', function() {
                monaca.viewport.adjust();
            });
        }
    };
} else {
    monaca.viewport = function(params) {
        params = merge(defaultParams, params);
        d("PC browser is detected");

        monaca.viewport.adjust = function() {
            var width = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
            var scale = width / params.width;
            zoom(width / params.width);
            params.onAdjustment(scale);
        };

        if (params.width !== 'device-width') {
            window.addEventListener("resize", function() {
                monaca.viewport.adjust();
            }, false);
            document.addEventListener("DOMContentLoaded", function() {
                monaca.viewport.adjust();
            });
        }
    };
}

monaca.viewport.isAndroid = isAndroid;
monaca.viewport.isIOS     = isIOS;
monaca.viewport.adjust    = function() { };
})();

--------------------------- scall support tabel -------------

此功能在javascript支持平板电脑上

Answer 9

仅在特定点下方显示视口。

在此示例中，视口指令显示在768px以下

＆＃13;

  <script type="text/javascript">
  		//below 768px is mobile
  		if(screen.width<768)      
      		document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
</script>

＆＃13;

Answer 10

您可以在头标记

中使用此代码

<meta name="viewport" content="width=device-width, initial-scale=1"/>

然后将此样式用于移动设备

<link rel="stylesheet" media="print and (min-width: 767px)" href="http://…" />

将平板电脑视口设置为1024px，移动设备宽度

10 个答案: