網頁實作切換電腦版和手機版
透過viewport的設定來切換
Jun 4, 2021
簡介
明明網頁的RWD版運作得很好，在手機上操作得也很順，但有時候可能會遇到客戶無理的要求，要求你必須在手機板呈現電腦版頁面，這時候就需要用程式來控制改變viewport，這篇文章會介紹如何使用程式來達成。
此文章只會快速帶過viewport的相關介紹，主要放在解說如何實作出此功能，詳細分解步驟以及說明程式碼。
了解viewport
指定一個meta元素的name為viewport，並放在head中就可以發揮viewport的作用。而且此設定在手持裝置(手機、平板等)才有用，如果你要在電腦上看viewport設定後的效果，只是把網頁縮小可是沒用的喔，記得右鍵開啟「檢查」來看，並點擊 Toggle device toolbar 。
例如以下viewport
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>viewport 的 content設定值
如上面的viewport，已經設定了width和initial-scale這兩個參數，用{參數名}={值}的方式宣告參數的數值，並且用, 做分隔，content的其他參數設定如以下所列，只列出此文章會用到的兩個設定。
- width: 寬度(device-width或正整數)
- initial-scale: 初始縮放比例(浮點數)
至於其他參數詳見此文章的介紹 https://miro.medium.com/max/700/1*6ApOKh50c-Kk-EEJSZxiPA.png
步驟拆解
主要步驟
網頁加載成功後
- 取得display mode的值
- 根據display mode值，判斷並更新viewport的content
- 註冊「切換按鈕」的行為
切換按鈕的行為
- 設定新的display mode值到local storage
- 重新加載網頁
實作
用以下範例來實作，可以將js部分加到你的網頁即可。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pc Mobile DisplayMode Toggle Sample</title>
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1 id="title">Title</h1>
<h2 id="widthDisplay">寬度: </h2>
</div>
<button id="displayModeToggleButton">
切換為電腦版
</button>
</body>
</html>style.css
用來演示viewport設定之後差別的style，加了breakpoints讓你比較看得出來差別所在。
.wrapper {
padding: 8px;
background-color: rgb(141, 235, 251);
}@media screen and (min-width: 768px) {
.wrapper {
background-color: #ddd;
}
}
index.js
網頁加載成功後，偵測並設定viewport，以及註冊button的相關行為。
實作display mode handlers，此handlers負責viewport相關的設定及處理，詳細的content設定都寫在此。
演示效果
