如何在手机上调整html页面的大小

Question

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

然而，当我使用我的Android手机浏览器查看它时，由于手机屏幕太小，需要进行大量的滑动来定位我想要聚焦的区域。

我的网页中间只有一个索引表，而正文的左右都是空白的。我在想，是否有任何方法可以检测浏览器，看看它是否来自移动设备，然后调整页面正文的大小？

欢迎任何建议。提前谢谢。

Answer 1

它可以是：

如果你不想让水平滚动条出现在较小的屏幕上，你应该看看并学习一些响应式的网站代码，比如this one.

• Try，将这段代码添加到你的头标签

1. <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%;
  }
}

你可以在这里找到更多的例子：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/