gpt4 book ai didi

html - 使用 rem 时,Bootstrap 标题字体在移动设备中较小

转载 作者:技术小花猫 更新时间:2023-10-29 12:52:44 25 4
gpt4 key购买 nike

在我的应用程序中,我使用 Bootstrap 并将 2rem 设置为我的 h2 元素,将 1.7rem 设置为我的 h3 标签。即使我在桌面上调整浏览器宽度(到手机的大小),h1 也比我想要的 h3 大。但是,如果我使用开发人员工具切换到移动设备 View 或从我的手机查看网站,h1 会变得比 h3 小!这里可能发生了什么?它发生在我创建的多个站点中。

示例 fiddle (无法在 fiddle 中复制问题。但它是代码):https://jsfiddle.net/gor87kg6/1/

存在问题的实时站点:http://jayatours.lk/

最佳答案

按照 Bootstrap 移动优先方法,我注意到您的网站没有使用视口(viewport)元数据。

尝试将以下内容添加到 <head> :

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

背景信息:

Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.

视口(viewport)信息:

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

我相信这可能是导致您使用 rem 问题的原因似乎已正确实现。它可能更有可能下​​降到 dpi/ screen resolutionmobile/ tablet设备本身。

关于html - 使用 rem 时,Bootstrap 标题字体在移动设备中较小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35100234/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com