Home
Programming-網頁語法-HTML

[HTML] viewport meta 淺見及說明

[HTML] viewport meta 淺見及說明

6月 15, 2015

作者：月

目錄

viewport 作用
viewport 屬性
viewport 範例

〈1〉viewport 作用 viewport 的作用是告訴瀏覽器，目前裝置有多寬(或多高)，以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時，如寬度100%或螢幕由垂直轉為水平，viewport大小是一個根據。語法：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

這個例子中的 maximum-scale 也設為 1，其實就是不讓使用者縮放，以維持頁面的設計，行動裝置專用的網頁常有必要這樣做。

〈2〉viewport 屬性以下是 @viewport 規則提供的幾個樣式屬性：

屬性	說明
width=device-width	width 通常會看到設定為 device-width ，主要是為了讓整個頁面寬度與手機可視寬度相同，如此就可以簡單相容於不同機型螢幕大小，如果這邊 width 沒有設定的話，就會依照 html css 給予的 width 當作預設值。因為解析度不同，device-width 有時候不一定是 view width ，所以在類似 iphone 4 高解析度機器上，device-width=320 ，可是實際解析度為 480，這時候就需要利用 javascript 針對 UA 下去做動態調整。
initial-scale=1.0	設定網頁的預設縮放比例，這裡設定為 1.0 ，就是預設維持原比例。
maximum-scale=1.0	viewport 的最大縮放比例。
user-scalable=0 user-scalable=no	從屬性名稱來看就是允許開啟、關閉的設定，使用者能否放大、縮小頁面，如果頁面不允許手機使用者縮放，就直接設定為 0，或者 no，反之`要啟動縮放功能，給予 1或者是 yes`。

〈3〉viewport 範例

Sample code：表格在桌機與手機的不同表現 ( 一 )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Title of the document</title>
<style>
.my-table {
  font-size       : 16px;
  width           : 100%;
  max-width       : 100%;
  border-spacing  : 0;
  border-collapse : collapse;
  background      : transparent;
  border          : 1px solid #999;
}
/* thead */
.my-table thead {
  background : #ccc;
}
.my-table thead th, .my-table thead td{
  border : 1px solid #999;
}
/* tbody */
.my-table tbody tr:hover {
    background : #FFCCCC;
}
.my-table tbody tr:hover.is-bgcolor {
    background : #FFFFCC;
}
.my-table tbody tr.is-bgcolor {
    background : #eee;
}
.my-table th, .my-table td{
    padding : 15px;
    border  : 1px solid #999;
}
@media screen and (max-width: 600px) {
  /* thead */
  .my-table thead {
    display: none;
  }
  /* tbody */
  .my-table tbody tr:hover {
    background: none;
  }
  .my-table tbody tr.is-bgcolor:hover {
    background: none;
  }
  .my-table tbody tr.is-bgcolor {
    background: none;
  } 
  .my-table tbody th, .my-table tbody td {
    padding     : 15px;
    border      : 1px solid #999;
    width       : 100%;
    line-height : 25px;
    min-height  : 40px;
    display     : table;
  }
  .my-table tbody th:nth-child(odd),
  .my-table tbody td:nth-child(odd) {
    background : #eee;
  }
}
</style>
</head>
<body>
  <table class="my-table">
    <thead>
      <tr>
        <th>標題</th>
        <th>項目一</th>
        <th>項目二</th>
        <th>項目三</th>
        <th>項目四</th>
        <th>項目五</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>資料1</td>
        <td>資料2</td>
        <td>資料3</td>
        <td>資料4</td>
        <td>資料5</td>
      </tr>
      <tr class="is-bgcolor">
        <td>2</td>
        <td>資料1</td>
        <td>資料2</td>
        <td>資料3</td>
        <td>資料4</td>
        <td>資料5</td>
      </tr>
      <tr>
        <td>3</td>
        <td>資料1</td>
        <td>資料2</td>
        <td>資料3</td>
        <td>資料4</td>
        <td>資料5</td>
      </tr>
      <tr class="is-bgcolor">
        <td>4</td>
        <td>資料1</td>
        <td>資料2</td>
        <td>資料3</td>
        <td>資料4</td>
        <td>資料5</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Sample code：表格在桌機與手機的不同表現 ( 二 )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Page Title</title>
<style>
table { 
  width          : 100%; 
  border-collapse: collapse; 
}
tr:nth-of-type(odd) { 
  background: #eee; 
}
td, th { 
  padding   : 6px; 
  border    : 1px solid #ccc; 
  text-align: left; 
}
th { 
  background : #333; 
  color      : white; 
  font-weight: bold; 
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  table, thead, tbody, th, td, tr { 
    display: block; 
  }
  thead tr { 
    position: absolute;
    top     : -9999px;
    left    : -9999px;
  }
  tr { 
    border       : none;
    border-bottom: 1px solid #ccc; 
  }
  td { 
    border-bottom: 1px solid #eee;
    position     : relative;
    padding-left : 30%; 
  }
  td:before { 
    position     : absolute;
    top          : 6px;
    left         : 6px;
    width        : 45%; 
    padding-right: 10px; 
    white-space  : nowrap;
  }
  td:nth-of-type(1):before { content: "商品"; }
  td:nth-of-type(2):before { content: "單價"; }
  td:nth-of-type(3):before { content: "數量"; }
  td:nth-of-type(4):before { content: "小計"; }
  td:nth-of-type(5):before { content: "刪除"; }

}  
</style>
</head>
<body> 
<table>
  <thead>
  <tr>
    <th>商品</th>
    <th>單價</th>
    <th>數量</th>
    <th>小計</th>
    <th>刪除</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>產品一</td>
    <td>500</td>
    <td>2</td>
    <td>1000</td>
    <td>刪除</td>
  </tr>
  <tr>
    <td>產品二</td>
    <td>300</td>
    <td>5</td>
    <td>1500</td>
    <td>刪除</td>
  </tr>
  </tbody>
</table>
</body> 
</html>

關閉標籤

☞ HTML 5: Is it <br>, <br/>, or <br />?
☞ HTML <br> 標籤
☞ HTML <link> 標籤
☞ HTML <img> 標籤

Source

☞ How to make responsive table without using bootstrap
☞ 熱血漢誌 | html viewport meta 說明及淺見
☞ 烏托比亞 | Mobile Web 前端技術筆記(一): Viewport的設定
☞ CSS規範草案 | CSS Device Adaptation Module Level 1
☞ Arno網路行銷SEO研究室 | Viewport標籤優化 – 響應式網頁設計
☞ 樂在設計 | CSS3 MEDIA QUERIES 詳細介紹與使用方法，RESPONSIVE WEB DESIGN 必備技術

Image Source

☞ Mobifreaks.com | Fitting mobile template inside mobile screen using viewport meta tag

沒有留言:

訂閱：張貼留言 ( Atom )