css - 将平板视口设置为 1024 像素，移动设备到设备宽度

Question

我有一个桌面宽度 > 980px 和移动宽度 < 768px 的响应式网站。我希望平板电脑以 980 像素的视口查看网站，但移动设备以设备宽度查看。

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

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

解决这个问题的最佳方法是什么？我不想检查服务器上的用户代理。

score 11 · Accepted Answer

据我了解，您想这样做：

$(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

score 2 · Accepted Answer

您可以使用视口元标记和CSS 媒体查询来完成此操作。在您的 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在这里

score 2 · Accepted Answer

用这个：

<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% 全尺寸。但在 pc 中是最大宽度 1024px。因此，您可以使用 css 设计其余的设计。这不需要 javascript 或插件。

score 1 · Accepted Answer

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

相应调整。本质上，此代码为“中间”设备（如平板电脑）提供了上限和下限值。

您可以通过执行以下操作来收紧该窗口以强制桌面 CSS 或大部分 CSS：

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

除了做这样的事情之外，您还必须“嗅探”设备，这听起来像是 90 年代（imo——不是那些日子吗？），或者使用视口元数据。

score 1 · Accepted Answer

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

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

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

您的桌面站点（现在是平板电脑）站点仍将在这些分辨率之上可见。

score 0 · Accepted Answer

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

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

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

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

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

标签布局宽度 列宽 装订线宽度
默认768px及以上42px 20px
手机到平板电脑 767 像素及以下 流体列没有固定宽度

注意：由于您将使用固定列宽，因此 div 不会超出固定列宽。

score 0 · Accepted Answer

每当客户想要响应式移动版本但在更大的东西上保留默认缩放时，我也会这样做 - 网络上真的没有太多关于：为不同的屏幕尺寸设置不同的视口标签，所以使用 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');
}

score 0 · Accepted Answer

(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支持表-------------

javascript支持平板电脑上的这个功能

score 0 · Accepted Answer

只需在特定点下方显示视口。

在这个例子中，视口指令显示在 768px 以下

  <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>

score -1 · Accepted Answer

您可以在 head 标签中使用此代码

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

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

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

css - 将平板视口设置为 1024 像素，移动设备到设备宽度

10 回答 10

Related

Reference