如何为您的网站/视口设置最小宽度，并在宽度低于该宽度时进行浏览器缩放

how to set a minimum width for your site / viewport and have browser scale if the width is below that

本文关键字：于该宽 缩放 浏览器 网站 最小宽度 设置 视口      更新时间：2023-09-26

我正在尝试将我的大脑包裹在视口/比例上。我有一个必须编程的网站，我得到的设计是响应式的，但如果设备的宽度低于 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 视口宽度？

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

。

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

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

您可以只使用媒体查询来定位特定屏幕尺寸上的特定元素。

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

假设您有一个包装所有页面的div，假设.wrapper.

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

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

.wrapper{
  min-width:420px;
}

但我想通过媒体查询，你会更灵活。

相关文章：