如何为您的网站/视口设置最小宽度，如果宽度小于该最小宽度，如何使浏览器缩放

Question

我试图围绕视口/鳞片包裹我的大脑。 我有一个我必须编程的网站，我给出的设计是响应式的，但如果设备的宽度低于420px，它确实不起作用。

在任何低于420px的情况下，我都喜欢它，如果浏览器将网站渲染为宽度为420px，只需缩小所有内容，但我无法弄清楚如何做到这一点。

我已经看到你如何动态地改变元视口标签，但是当我这样做时，它似乎没有任何影响，我不确定这是解决我想要实现的目标的最佳方式。

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

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视口宽度？

Answer 1

你可以通过使用媒体查询在css中做到这一点，它允许你在不同的屏幕中操纵evrything

例如，如果要在420px屏幕中更改div的宽度，可以执行以下操作：

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

Answer 2

您可以使用媒体查询来定位特定屏幕大小的特定元素。

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

假设你有一个包裹你所有页面的div ，那么就说.wrapper 。

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

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

.wrapper{
  min-width:420px;
}

但我认为，通过媒体查询，您可以更灵活。