html - 如何优化网站以在移动设备上很好地显示

Question

这是我在桌面浏览器上的截图

在此处输入图像描述

桌面浏览器上的一切看起来都很大。但是当我在移动浏览器上查看时，布局变得非常小。所以我错过了 html/css 代码中的一些东西，因为这个网站基本上我只使用了普通的 html/css 没什么特别的。

谁能指出我？谢谢

score 2 · Accepted Answer

确保在 . 中设置以下视口元标记<head>，否则文本会太小：

<meta name="viewport" content="width=device-width, initial-scale=1">

score 1 · Accepted Answer

@media当浏览器窗口通过查询低于特定大小时调整元素大小。

@media screen and (max-width: 500px) {
  div {
    width: 400px;
  }
}

score 0 · Accepted Answer

实际上，网站的移动视图优化是一个详细而广泛的主题，但对于您的情况，我的建议是稍微增加您的字体。

3 回答 3