使用视口元标记实现最小宽度

Posted 2023-02-22

【中文标题】使用视口元标记实现最小宽度

【英文标题】：Achieving min-width with viewport meta tag

【发布时间】：2013-02-09 00:41:29

【问题描述】：

我希望我的网页的 viewport width 等于 device-width，只要 device-width > 450px，否则为 450px（我的布局动态缩放，但在 450px 宽以下看起来不太好）。

以下两个元标记在设备宽度 > 450px 的平板电脑上运行良好：

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

但是，在手机上（例如 device-width=320px），前者对于内容来说太薄了；而后者会导致浏览器放大，因此用户必须手动缩小才能看到内容。

或者，这个元标记在手机上也很有效

<meta name="viewport" content="width=450" />

但没有利用平板电脑上可用的额外宽度。

任何帮助/想法都将不胜感激（如果它有所作为，我正在使用 GWT）。

【参考方案1】：

所以你想动态改变viewport标签的宽度。

给你：

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () 
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=580');

</script> 

见：http://www.quirksmode.org/mobile/tableViewport.html

【讨论】：

这很好用：。 here 页面提供了更多详细信息，here 页面是对视口的精彩解释。感谢大家的帮助，并为我指明了正确的方向。

这是如何解决问题的？将视口宽度设置为固定大小不会被解释为最小大小！ f.e.在 iPad 上并没有给网站更多的空间。此外，答案中建议的代码不完整。

@Andy 没有人提供完整的项目代码。伪代码足以让程序员抓住这个概念。如果你愿意，请告诉我。我会给你完整的代码。

@sᴜʀᴇsʜᴀᴛᴛᴀ 这不是伪代码，它是 javascript 代码。它只是不完整的，因此不是解决方案

查看我的答案以获取完整代码。我真的不明白隐藏 5 行代码的意义。此外，在更改视口之前无需等到 onload。

【参考方案2】：

试试这个：

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() 
    if (screen.width < 450) 
        var mvp = document.getElementById('vp');
        mvp.setAttribute('content','user-scalable=no,width=450');
    

</script>

请注意，我已交换了 initial-scale=1，因为我认为您的做法错误。当width=device-width 时，您希望将initial-scale 设置为1，以便页面完全适合窗口。当您设置特定的视口宽度时，您不想将 initial-scale 设置为 1（否则页面将开始放大）。

【讨论】：

你在底部的'Note'是$$, ty

另外，最近的 ios 版本似乎需要 user-scalable=no，否则它有时会忽略或覆盖您设置的宽度。我已经更新了答案。

【参考方案3】：

使用@media 标签和 css。它创造了奇迹。虽然它没有为视口提供最小宽度，但这是首选方式。

这是我为视口所做的：

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

然后我调整附加到视口的面板的大小：

@media all and (max-width: 1024px) 
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel
         width: 450;
        



@media all and (max-width: 320px) 
   /*styles for iPhone/android portrait*/
      .myContentPanel 
         width: 320;
    

显然你也可以有中间尺寸...

here's more in another example

【讨论】：

嗨，感谢您的快速回复。我了解媒体查询可用于更改 CSS 和更改内容 div 的大小。我只是不明白这如何影响视口？即我已经尝试了您的建议（并删除了视口元标记），但是当我在手机（Android）上查看它时，它只会使内容变小，周围有很多空白空间。

嗨，汤姆，请参阅修改后的答案。昨晚很晚......无论如何......我使用CSS来设置视口上面板的大小（而不是设置为屏幕大小的视口本身）。因此，对于较小的屏幕，如果内容不合适，面板将滚动显示内容。它在旋转屏幕时也能很好地工作。

接受答案中的 javascript 方法是我正在寻找的（更改视口而不是布局）。不过谢谢，我以前不知道媒体查询。

但是您接受的答案在 Firefox 移动版中不起作用，谁知道还有什么地方......

@jacmkno 您是否注意到 with pixel 没有“px”后缀？也许这就是原因。

【参考方案4】：

其他答案中给出的 JavaScript 代码在 Firefox 中不起作用，但如果您删除元标记并插入一个新标记，它将起作用。

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450)
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);

</script>

或者总是在 JavaScript 中插入它：

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) 
    viewport.setAttribute("content", "width=450");
 else 
    viewport.setAttribute("content", "width=device-width, initial-scale=1");

document.head.appendChild(viewport);
</script>

---

为了我的理智，我写了一个 polyfill 来添加一个 min-width 属性到视口元标记：

Set min-width in viewport metatag

有了这个，你可以这样做：

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>

【讨论】：

您的页面中应该始终包含视口元数据（如示例 1），因为 Google 不喜欢它丢失时（示例 2）。

【参考方案5】：

简而言之，不需要在视口上设置 min-width，因为您可以在 body 或 html 元素上设置它，以使它们及其内容比视口更宽。用户将能够滚动或缩小内容。

body 
  min-width: 450px;

我在 Chrome for Android 中做了一些测试，如果视口宽度设置为 device-width 以外的任何值，它会放大某些元素的字体。此外，shrink-to-fit=yes 对于最初缩小页面很有用。

最后，这种方法支持的桌面浏览器可能具有奇怪的窗口大小或当前缩放设置（这两者都会影响报告的视口尺寸），但不支持视口元标记。

【参考方案6】：

扩展@Brendan 和其他人的答案。视口大小不会在方向（纵向、横向）更改时再次调整。为此，请在方向更改时添加事件侦听器并再次调整大小。

<script>
      const resize = () => 
        if (screen.width < 450) 
          var viewport = document.querySelector("meta[name=viewport]");
          viewport.parentNode.removeChild(viewport);
    
          var newViewport = document.createElement("meta");
          newViewport.setAttribute("name", "viewport");
          newViewport.setAttribute(
            "content",
            "width=450, maximum-scale=1.0, user-scalable=no"
          );
          document.head.appendChild(newViewport);
        
      ;
      resize();
      window.addEventListener("orientationchange", resize);
</script>

【参考方案7】：

我刚刚删除了 initial-scale=1 并在 Android Chrome 和内置浏览器上完美运行。不再有意外的缩放！ :)

<meta name='viewport' content='width=device-width'>