根据设备更改文本大小答案

【问题标题】：Changing text size based on the device根据设备更改文本大小
【发布时间】：2020-06-19 23:31:23
【问题描述】：

当用户使用移动设备时，我需要编写更改文本大小的代码。我的代码是：

if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|   Opera Mini/i.test(navigator.userAgent)) {
  document.getElementById("link").style["font-size"] = "120%";
}

它不起作用，但我不明白问题出在哪里

【问题讨论】：

stackoverflow.com/questions/16387400/…
您最好从屏幕尺寸的角度考虑问题，而不是设备是否是移动设备！
检查屏幕大小会比用户代理更有效：css-tricks.com/snippets/css/fluid-typography
这能回答你的问题吗？ Font size relative to the user's screen resolution?
哎呀，我自己想通了。这是一个错字。酷。

标签： html

【解决方案1】：

正如有人评论您的问题，您最好使用媒体查询来检查设备屏幕尺寸：

@media only screen and (max-width: 500px) {
  p {
    font-size: 0.5rem;
  }
  
  h1 {
    color: blue;
  }
}

<h1> My Paragraph </h1>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod excepturi maiores saepe maxime dolores debitis eos sint quidem, enim consequatur. </p>

尝试在全窗口浏览器中打开此代码，然后缩小窗口。只要屏幕为 500 像素或更短，您添加到此媒体查询中的任何 CSS 样式都会应用。

【讨论】：

【解决方案2】：

你的意思是响应式文本！，这是一个简单的解决方案

运行以下代码，然后将其设为整页，然后尝试调整浏览器大小

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>


</body>
</html>

【讨论】：