程序员经验分享-hwhale

Chrome 移动设备上的字体问题，字体大小呈现得更大

2024-02-15

我在使用 Chrome 移动设备时遇到问题，某些文本的字体大小比 CSS 中的字体大小大。我检查了开发人员工具，发现这些文本继承了正确的字体大小，但在计算样式中仍然渲染了 5px 大。

我找到这个帖子修复 Mobile Safari (iPhone) 上的字体大小问题，其中文本呈现不一致并且某些字体比其他字体大？ https://stackoverflow.com/questions/5303263/fix-font-size-issue-on-mobile-safari-iphone-where-text-is-rendered-inconsisten但 -webkit-text-size-adjust 在这里对我不起作用。

我检查了不同的移动浏览器，包括 Dolphin、Opera Mobile 和 Safari，除了 Chrome mobile 之外，所有浏览器都正确呈现了文本。

更新：已解决，是由于Chrome Mobile设置使文本变大所致。我不认为这是我们可以在设置中阻止的东西。


问题在于 Chrome Mobile 18 和 Chrome Mobile 25 之间字体的呈现发生了变化。看来 Chrome 的 100% 缩放功能实际上是向上缩放字体。我们必须将 Chrome 缩放功能设置为 85%，才能使字体不被放大。

此外，如果我们触摸网页上的任何内容，页面上的字体也会重新调整到正确的大小。这种尺度之间的转变非常令人担忧，因为它对应用程序的影响是一种极其负面的方式。特别是如果您正在尝试任何需要确保心理测量有效性的事情。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Googlechrome

Mobile

Chrome 移动设备上的字体问题，字体大小呈现得更大 的相关文章

  • 带条纹的自定义字体 src

    以此作为参考https stripe com docs elements reference stripe elements https stripe com docs elements reference stripe elements

  • CSS 圆角六边形按钮

    我可以使用 CSS 创建相同的按钮 圆角是重要部位 角是主要原因 带圆角的三角形按钮 请看我下面的代码和图片 lngbtn position relative width 150px height 50px margin 50px colo

  • Opera 中 margin-bottom 的计算方式不同

    我有一个具有相对位置的 div 和一个具有绝对位置的子 div div class out div div div CSS container width 100px height 100px position relative insid

  • Chrome 跨域 PATCH 请求不起作用

    我有一个带有 REST Api 的网站 现在我正在创建一个浏览器扩展 它将从某些页面收集数据并将它们发送回 REST Api 因为我希望我的扩展能够与 Firefox 和 Chrome 兼容 并且易于维护 所以我将实际代码作为脚本标记注入到

  • 预加载 javascript 和 css 文件

    我目前正在开发一个移动网站 该网站大量使用图像 CSS 和 JavaScript 例如 它使用未压缩的 150KB 的库 我为图像构建了一个预加载器 效果相当好 function loadImages images var sum 0 fo

  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的

  • 如何检查字体是否有符号

    我的文档中有以下 css 规则 font family Trebuchet MS Tahoma 但我发现有些浏览器有 Trebuchet MS 字体没有我需要的符号 某些带有非拉丁字符的语言 在这种情况下 浏览器显示方块而不是符号 我怎样才

  • 禁用 Bootstrap 中的链接

    第一个例子没有成功 我需要始终有一个列表来禁用链接 或者我的第一个演示有什么问题 a class disabled href Disabled link a ul class nav nav pills li class disabled

  • CSS位置：绝对+动态高度

    我有 4 个 div 标签一个接一个 全在position absolute我使用它们对齐top and left 第三个 div 标签包含动态内容 并且 div 的高度根据其中的文本量而变化 然而 当我设置top and left在所有

  • 项目之间的点线

    我正在建立一个餐厅网站和菜单 我需要在菜单项和价格之间画一条 点线 我需要得到它 而不需要手动一一写点 此功能应该自动工作 是否可以使用 span 或 div 等背景来创建它 我拥有的 我想要的是 我想你正在寻找这样的东西 html div

  • 浏览器特定的 CSS 属性

    在哪里可以找到完整的 浏览器特定 css 属性 参考 我的意思是一些属性 例如 moz border radius这仅适用于 Firefox 或 webkit min device pixel ratio 这些示例仅适用于指定的 Web 浏

  • 如何在 flutter/dart 中使用设定大小的自定义字体？

    我正在尝试使用color fontWeight and fontFamily with style style copyWith 我尝试使用的自定义字体是Vonique 我已经将它像这样导入到pubspec yaml fonts famil

  • History.replaceState 仍然向“浏览历史记录”添加条目

    具体来说 调用以下代码片段 history replaceState undefined undefined value 正确地不会影响当前页面的后退按钮行为 但是will在 浏览历史记录 页面添加一个条目 这是我不想要的 下图是 Chro

  • 如何更改引导弹出窗口箭头边框颜色而不填充它？

    我想更改弹出箭头的边框颜色 当我应用边框颜色时 箭头本身填充了颜色 我只想为弹出框主体的箭头边框提供颜色 p Click on button to see Popover p a href class btn btn primary pop

  • 阻止特定 URL 进行测试的最佳方法是什么？

    我正在使用 Google Chrome 和 Fiddler 版本 4 4 观察一个网站 该页面正在使用 AJAX 来更新其数据 我想阻止特定的 URL 以测试如果它不起作用会发生什么 阻止 URL 最简单的方法是什么 你希望发生什么 转到自

  • NodeJS 无法加载 css 文件

    所以我正在尝试制作一个 NodeJS 服务器 并且我尝试保留尽可能少的附加组件 但是 我遇到了一个问题 我似乎无法加载任何内容CSS我调用的文件HTML文件 该调用似乎确实由服务器处理 但它不会显示在浏览器中 My 网络服务器 js fil

  • Android，在连接wifi的情况下与移动数据通信，无需上网

    我有一个汽车配套应用程序 需要与 WiFi 和移动数据网络进行通信 我的车辆控制单元提供了一个无需互联网访问的 WiFi 网络 它公开了我们可以从应用程序调用的 API 服务 除此之外 我们还需要使用手机移动数据 3G 4G 与另一个可通过

  • 禁用任何类型的浏览器窗口滚动？

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间

  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下

  • 响应式菜单：悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单

随机推荐

热门标签