1

我正在制作一个我构建的响应式网络应用程序。我无法让某些屏幕的宽度小于 360 像素。但许多智能手机正试图以 320 像素宽显示它。如何使它响应低至 360 像素但不少于？

更新：在发布之前，我已经指定了一个视口标签：

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

而且，我为 360px 的容器设置了最小宽度。问题是这样做时，当用户第一次访问该网站时，右侧的 40 像素会被隐藏，因为 iPhone 和许多其他人默认仅显示 320 像素，即使它们能够显示更多。我知道他们可以缩小，但我希望它在加载时显示 360 像素宽。

4

2 回答 2

0

因此，请务必将以下视口元标记添加到您的 html 文档的头部：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

您将需要它来真正在手机或平板电脑上进行任何响应式工作。

我不确定您是否希望您的宽度不超过 360 像素，或者您被困在 360 像素并希望确保它一直减小到 320 像素。

如果你希望它不小于 360 像素... 你想让你的“包装器”元素流动到 360 像素你可以在你的包装器 div 上设置一个属性（或者任何控制你网站宽度的元素）在 CSS要说min-width: 360px;。这将使包装元素的宽度不会小于 360px。

如果您无法将其调整为小于 360 像素的大小并希望它...这与上述情况相反。也许你的包装元素有一个min-width: 360px集合。在这种情况下，您可以删除该属性，该属性将允许其缩放小于 360 像素。

于 2014-09-03T17:29:54.237 回答
0

我还没有测试过视口的这种改变，但试试看。

<meta name="viewport" content="width=device-width, min-width=360, initial-scale=1.0" />

我希望它能做的是使宽度等于设备的宽度，除非设备的宽度小于 360px（又名 iphone），在这种情况下使宽度为 360px。

不过，你最好的选择是稍微改变一下你的心态，并使用媒体查询来调整你的代码，以获得 320 像素宽的最佳演示文稿。因此，让您的网站以 320 像素宽显示，但更改 css 以使网站适合该宽度。

例如：

@media screen and (max-width: 360px){
  .wrapper {
     width: auto;
  }
  //change some font sizes
  //put float: none on a few elements that were previously floating
  //change a few widths of container elements to auto
  //etc.
}

媒体查询中的 css 仅在设备为 360 像素或更小的情况下才会被应用。

于 2014-09-04T00:59:53.053 回答