横幅在移动设备上太小

Question

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

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

这是我手机上的同一页 phone。

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

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

页面内容的宽度（以及我的 <footer> 元素的相应宽度，它有一个顶部边框）在桌面上全屏时不会占据浏览器的整个宽度，但是确实占据了我单元格的整个宽度 phone.
横幅永远不会大于我桌面上图像的像素宽度，但会占据我的小单元格的整个宽度 phone。

是否有任何简化的方法？

Answer 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%;
  }
}

Answer 2

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

...
<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 并在 phone 仿真模式下查看或直接检查您的 phone。

横幅在移动设备上太小

Banner is too small on mobile device

html

css

responsive-design

adaptive-design