Question

我是HTML和CSS开发的新手，我创建了一个在PC网页浏览器上看起来很好的html。

然而，当我使用我的Android手机浏览器查看时，由于手机屏幕太小，手机用户需要做很多滑动才能找到他们想要关注的区域

我的网页中间只有一个索引表，而正文的左右两侧都是空白的。我在想是否有办法检测浏览器是否来自移动设备，然后调整页面正文？

欢迎任何建议。谢谢。

Answer 1

它是：

您应该查看并了解一些响应式网站代码，例如this one。
如果您不想在较小的屏幕上使用水平滚动条，请尝试在开头标记<meta content='width=device-width, initial-scale=1' name='viewport'/>后添加此代码。

Answer 2

今天最流行的方法是使用CSS媒体查询。媒体查询中的任何代码仅适用于指定的参数。这通常适用于浏览器的高度和宽度，但它也适用于打印的样式表，显示分辨率和其他一些东西。

下面是一个针对智能手机常见尺寸的320px和480px浏览器宽度的示例。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  body {
    background: #999;
    width: 100%;
  }
}