如何为您的站点/视口设置最小宽度并在宽度低于该宽度时设置浏览器比例答案

【问题标题】：how to set a minimum width for your site / viewport and have browser scale if the width is below that如何为您的站点/视口设置最小宽度并在宽度低于该宽度时设置浏览器比例
【发布时间】：2016-07-08 17:28:09
【问题描述】：

我正试图将我的大脑包裹在视口/比例尺上。我有一个必须编程的网站，我得到的设计是响应式的，但如果设备的宽度低于 420 像素，它真的不起作用。

在任何低于 420 像素的地方，如果浏览器将网站呈现为 420 像素宽，我会喜欢它，只需将所有内容都缩小，但我不知道如何做到这一点。

我已经看到如何动态更改元视口标签，但是当我这样做时，它似乎没有任何影响，我不确定这是处理我正在尝试的最佳方法达到。

无论如何，这是我尝试过的：

var minBP = 420;
//ww = window width

if (self.ww < minBP && lastScreenWidth > minBP){ //site is smaller than minimum allowed width, modify viewport
    var viewportString = "width=" + minBP + ", initial-scale=1.0";
    $('#blackrock-viewport').attr('content',viewportString);
}

有谁知道当浏览器低于这些尺寸时如何渲染一个缩小的 420 视口宽度？

【问题讨论】：

标签： javascript html css viewport meta

【解决方案1】：

你可以在 css 中使用 Media Queries 来做到这一点，它允许你在不同的屏幕上操作 evrything

例如，如果你想改变 420px 屏幕中 div 的宽度，你可以这样做：

@media (min-width:420px) { 
div{
 width:50px;
   }
}

【讨论】：

对 - 但是我必须调整网站中每个元素的大小 - 视口标签似乎能够以某种方式呈现缩放视图，所以我希望找到一种方法只更改一两个变量，而不是整个网站的 CSS。
@mheavers 您不必设置每个元素的大小，只需设置假定的 根元素，即定义页面宽度的那个。

【解决方案2】：

您可以只使用media queries 来定位特定屏幕尺寸上的特定元素。

根据您的情况，您只需将wrappers 的宽度限制为您喜欢的大小。

假设您有一个包含所有页面的div，比如说.wrapper。

@media screen and (max-width:420px) { 
  .wrapper{
    width:420px;
  }
}

当然，您也可以在不使用媒体查询的情况下执行此操作，只需设置包装器的 min-width 属性即可。

.wrapper{
  min-width:420px;
}

但我认为媒体查询更灵活。

【讨论】：