如何僅增加桌面設備的字體大小

Question

在 ASP.Net MVC 項目上工作，我不想只是說......尋找一種檢測移動/桌面設備的方法。 就像在mozilla web 網站上一樣，他們說......你的第一步是盡可能避免它。 首先嘗試確定您為什么要這樣做。

我搜索並找到了很多答案，但它們都不是有效的或檢測移動設備的官方方法，這就是為什么我開始解釋我為什么需要它的原因。

給我的第一個任務是增加整個 web 站點的字體大小，我做到了，它使用下面的代碼運行良好

    $(function increaseFont() {
    document.body.style.zoom = "150%"
});

現在我有了新的要求，僅將移動設備的尺寸減小到正常值......所以我正在考慮在上述 JS function 之前有一個if條件來檢測設備是移動設備還是桌面設備。

請問有什么想法嗎？

Answer 1

我會使用標准媒體查詢來更改 CSS 屬性。 您正在尋找的代碼可能類似於以下內容：

@media only screen and (min-width: 768px) { /* Anything larger than a tablet */
  body {
   font-size: large; /* Increases every font size */
  }
}

有關更多信息，您可以查看W3 學校網站。

希望有幫助。

Answer 2

您可以使用 JavaScript 讀出 window 內部寬度。

這可能是您要求的 if 條件：

if (window.innerWidth > 768) {
   // do stuff for desktop devices
}

if 條件中的值確定視口所需的最小寬度（以 px 為單位），以執行其主體中的代碼。