Bootstrap 脚手架在移动设备上显示效果不佳

Question

我用 HTML/CSS 设计了我的网站并使用了最新的引导程序，网站看起来不错，但是当我在移动设备中打开此网站时，它在移动设备上显示的字体非常小。

我的网站

我做错了什么？

Answer 1

视口元标记： 确保已将视口元标记包含在 HTML 文档的部分中。该标签对于响应式设计至关重要，可确保网页正确适应不同的屏幕尺寸。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 属性将视口的宽度设置为设备宽度，确保在移动设备上正确渲染。 initial-scale=1 属性设置初始缩放级别，shrink-to-fit=no 防止 iOS Safari 自动缩小字体。

Bootstrap 响应式实用程序：Bootstrap 提供响应式实用程序类，您可以使用它们根据屏幕尺寸控制字体大小。确保您正确使用这些类来调整不同视口大小的字体大小。

<p class="font-size-lg">Large text on all devices</p>
<p class="font-size-md">Medium text on all devices</p>
<p class="font-size-sm">Small text on all devices</p>

<!-- Responsive font size classes -->
<p class="font-size-lg-md">Large text on large devices, medium text on medium and small devices</p>

媒体查询：如有必要，您还可以使用媒体查询定义自定义 CSS 规则，以调整特定屏幕尺寸的字体大小。 Bootstrap 的网格系统和断点可以轻松创建响应式设计。

@media (max-width: 576px) {
  /* Define font sizes for small devices */
  body {
    font-size: 14px;
  }
}