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

Question

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

但是，当我使用我的安卓手机浏览器查看时，由于手机屏幕太小，需要做很多滑动才能定位到我想要对焦的区域。

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

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

score 12 · Accepted Answer

它是：

你应该看看并学习一些像这样的响应式网站代码。
<meta content='width=device-width, initial-scale=1' name='viewport'/>如果您不希望在较小的屏幕上使用水平滚动条，请尝试在开头的 head 标签之后添加此代码。

score 3 · Accepted Answer

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

这是一个针对 320 像素和 480 像素之间的浏览器宽度的示例，这是智能手机的常见尺寸。

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

2 回答 2