Question

我正在创建一个我已建立响应的网络应用程序。我无法让一些屏幕得到任何小于360px宽的屏幕。但许多智能手机都试图以320px的宽度显示它。怎么做才能让它响应360px而不是更低？

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

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

并且，我为360px的容器设置了最小宽度。问题在于，在用户首次以IPhones访问网站时，右侧的40px被隐藏，而其他许多默认只显示320px，即使它们能够显示更多。我知道他们可以缩小，但我希望它在加载时显示360px宽。

Answer 1

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

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

您需要这样才能在手机或平板电脑上做任何响应式工作。

我不确定你是否希望你的宽度不超过360px，或者你被困在360px并且想要确保它一直降低到320px。

如果你想要它不小于360px ...... 你想拥有你的＆＃34;包装＆＃34;元素只有流量低至360px你可以在你的包装div（或控制网站宽度的任何元素）上设置一个属性来说min-width: 360px;。这将使包装元素不会小于360px宽。

如果你不能让它调整小于360px并想要它... 这与上述情况相反。也许你的包装元素有一个min-width: 360px集。在这种情况下，您可以删除该属性，使其缩放范围窄于360px。

Answer 2

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

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

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

你最好的选择是真正改变你的思维方式并使用媒体查询来调整你的代码以获得320px宽的最佳演示。因此，让您的网站以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仅在设备为360px或更低时才会应用。

如何防止响应/适应性皮肤在360px宽度以下收缩

2 个答案: