如何通過我的 HTML 或 JavaScript 代碼在移動設備上強制桌面視圖

Question

我正在更新網站，而移動視圖看起來並不像樣。 我嘗試重寫代碼，但仍然令人沮喪，因為我不是構建前端的人

{ header } 或 JavaScript function 中是否有任何代碼可以實現此目的？

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

Answer 1

我為您推薦了一些解決方案

如果要識別設備，請使用 JavaScript

/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)

或者

'ontouchstart' in document.documentElement)

但是你可以使用 css 與屏幕寬度

@media only screen and (max-width: 560px) { .exampleclass {} }

或者為移動版創建一個自定義文件並在header中調用

<link rel="stylesheet" media="screen and (max-width: 560px)" href="mobile.css" />

Answer 2

您可以更改元鏈接以顯示桌面版本：

<meta name="viewport" content="width=1024">

而不是響應式版本：

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

Answer 3

您可以嘗試以下幾件事 -

<meta name="viewport" content="width=1024">

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

（看，它是 0.1 而不是 1.0）