2024年5月16日 星期四

HTML meta 標籤的 name 屬性的屬性值 viewport 範例


當我們完成一個新的 HTML 網頁文件，並準備上傳至網路供大家瀏覽時，可能會發現不同廠牌或不同規格的手持式行動裝置上，使用者的體驗會有不同。以下是本範例的程式碼：

<html>
<head>
<style>
body {
font-size: 19px;
}
</style>
</head>
<body>
<h1>The following is the sample text for this example</h1>
<p>11 222 3333 44444 555555 66 777 8888 99999 000000 AB CDE FGHI JKLMN</p>
</body>
</html>

以上的 HTML 程式碼，在桌上型裝置上看起來效果很好 ( 文字清晰可讀 )。但在手持式行動裝置上 ( 例如 : 手機或小平板電腦 )，體驗可能不佳，因為文字顯得太小，難以閱讀，如下參考示意圖 A 所示。

範例未加入 meta name 為 viewport 的執行結果示意圖
參考示意圖 A：範例未加入 meta name 為 viewport 的執行結果示意圖


為了改善這個問題，可以使用 HTML5 中的 viewport ，將其加入至 <head></head> 標籤內，程式碼如下：從下面的「參考示意圖 B 」與「參考示意圖 A」的比較可以看出，在手持式行動裝置上，閱讀文字輕鬆了許多。

範例加入 meta name 為 viewport 的程式碼：
  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <style>
  5. body {
  6. font-size: 19px;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>The following is the sample text for this example</h1>
  12. <p>11 222 3333 44444 55555 66 777 8888 99999 000000 AB CDE FGHI JKLMN</p>
  13. </body>
  14. </html>

範例加入 meta name 為 viewport 的執行結果示意圖
參考示意圖 B：範例加入 meta name 為 viewport 的執行結果示意圖


-

沒有留言:

張貼留言

請注意 : 您的留言發佈成功 , 需經審核後 , 才能決定是否回覆 . 謝謝 !!

訂閱： 張貼留言 (Atom)