移动设备上的横幅太小答案

【问题标题】：Banner is too small on mobile device移动设备上的横幅太小
【发布时间】：2015-12-13 09:30:36
【问题描述】：

在某些时候，我知道我需要硬着头皮认真阅读响应式和自适应设计，但我希望有一种非常简单的方法来解决这个问题。

我有以下网页，在我的桌面浏览器中显示。

这是我手机上的同一个页面。

虽然在这里可能很难分辨，但在我的手机上查看时，横幅太小了。

理想情况下，我希望这样：

页面内容的宽度（以及我的<footer>元素的相应宽度，它有一个上边框）在桌面全屏时不会占用浏览器的整个宽度，但会占用我手机的整个宽度。
横幅永远不会大于我桌面上图像的像素宽度，而是会占据我小型手机的整个宽度。

有什么简化的方法吗？

【问题讨论】：

你听说过media queries吗？
将图片制作成您希望在移动设备上显示的尺寸，然后使用媒体查询来限制桌面上的宽度。
@cocoa：是的，我听说过媒体查询，我了解了基本概念。但我对他们来说是新手，希望有人能指出我正确的方向，以一种非常简单的方法在一个非常简单的网站上执行此操作。我想我可以在设备很小的时候将东西的宽度设置为 100%，在设备较大的时候说 60%。尚不确定这是否是最简单的方法。

标签： html css responsive-design adaptive-design

【解决方案1】：

您可以使用media-queries 来处理基于视口的样式更改。例如，您可以执行以下操作：

JS Fiddle Example

/* Desktop Styles here*/
footer {
  background: blue;
  width: 500px;
}
.banner > img {
  width: 300px;
}

/* When the screen is smaller than 560px, specify what properties you wan to change. */
@media only screen and (max-width: 560px) {
  footer {
    width: 100%;
  }
  .banner > img {
    width: 100%;
  }
}

【讨论】：

感谢您的领先。打算玩这个。
刚刚为示例添加了一个小提琴。

【解决方案2】：

除了您应该认真考虑认真响应的媒体查询之外，您还需要调整标题中的视口元标记。将<meta name="viewport" content="width=device-width, initial-scale=1"> 添加到您的<head> 标记以指示手机浏览器不要尝试将页面显示为缩小状态。所以，例如：

...
<head>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <title>Hooray Banana</title>
        <meta name="keywords" content="This page is a placeholder for future content.">
        <meta name="description" content="sc web group">
        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...

然后 F12 并在手机仿真模式下查看或直接在手机上查看。

【讨论】：

是的，这一步是必要的。我仍然需要对原因进行更多研究，但我知道它正在缩小，否则出于某种未知原因。
嗨@JonathanWood，这不是出于未知原因。如果您未指定视口元标记，您手机的浏览器默认会尝试显示整个页面。如果您设置它（例如，初始比例为 1），那么它会告诉浏览器最初不要缩小。您还可以设置“maximum-scale=1”来告诉浏览器在双击时不要放大。本质上：更多详情请参见此处：developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag 我希望我的帖子对您有所帮助。有任何问题，请尽管提问。
但我不知道为什么它必须缩小以显示整个页面。因为我们现在都知道页面在比例设置为 1 时会很好地适应。
@JonathanWood，如果没有元标记和初始比例 1，浏览器会尝试显示整个网页，因此它假定初始比例低于 1（为了论证，假设为 0.5）。原因是，它试图表现得像桌面浏览器一样，并像在桌面浏览器上一样显示页面。为什么？因为手机浏览器是在台式机之后出现的。通过设置元标记和适当的值，您可以告诉手机浏览器像手机浏览器一样工作，并像在手机上而不是桌面上一样显示页面。
要尝试更多地理解这一点，请尝试更改初始比例值 - 将其设置为 0.5 并查看它在手机上的外观，然后将其更改为 1 和 2。