跳到主要內容

html viewport meta 說明及淺見

html viewport meta 淺見及說明

web mobile 化已經是一個全球的局面,好像網站如果沒有做個 media query,都會羞的不敢見人。
神奇的地方是很多人都會在html head 處加上 viewport 這個 meta data,為了釐清實際的效用以及屬性,接下來將大略介紹 viewport-meta 說明屬性與應用。

屬性說明

W3C 協會定義 viewport meta 目前還屬於草案,意思就是有可能隨時修改,特別註記一下,此文於西元2012年3月28日撰寫,以下描述如有出入,以W3C 標準為主。
viewport 可以設定的屬性分別如下,
width:可設定數值,或者指定為 device-width
height:可設定數值,或者指定為 device-height
initial-scale:第一次進入頁面的初始比例
minimum-scale:允許縮小最小比例
maximum-scale:允許放大最大比例
user-scalable:允許使用者縮放,1 or 0 (yes or no)
最初執行viewport meta加入如下
<meta name="viewport" content="width=device-width, initial-scale=1.0">
編譯過程會轉化成如下的語意,
@viewport {
    width: device-width;
    initial-scale: 1.0
}

基本說明

width=device-width
先提一下幾個注意的地方,首先在 viewport 裡面的 width 通常會看到設定為device-width ,主要是為了讓整個頁面寬度與手機可視寬度相同,如此就可以簡單相容於不同機型螢幕大小,如果這邊width 沒有設定的話,就會依照 html css 給予的 width 當作預設值。
因為解析度不同,device-width 有時候不一定是 view width ,所以在類似 iphone 4 高解析度機器上,device-width=320 ,可是實際解析度為 480,這時候就需要利用javascript 針對UA 下去做動態調整。
user-scalable
從屬性名稱來看就是允許開啟、關閉的設定,使用者能否放大、縮小頁面,如果頁面不允許手機使用者縮放,就直接設定為 0,或者 no,反之要啟動縮放功能,給予 1或者是 yes。
接下來將說明幾種常用的方式,以及測試驗證提供給大家參考。
基本寬度(並不是指 html body width),
<meta name="viewport" content="width=300px">
基本高度
<meta name="viewport" content="height=300px">
禁止使用者放大縮小
<meta name="viewport" content="user-scalable=0">
<meta name="viewport" content="user-scalable=no">
基本款式,
<meta name="viewport" content="width=device-width">
初始檢視 n 放大,(這裡使用 x 10.0)
<meta name="viewport" content="width=device-width, initial-scale=10.0">
限制最大放大比例
<meta name="viewport" content="width=device-width, maximum-scale=15.0">
限制最小縮小比例(數值必須為正值)
<meta name="viewport" content="width=device-width, minimum-scale=0.1">

進階應用

上面已經說明了幾種常用的基本應用,接著要說明一個概念,假設設定數值

放大議題

initial-scale=10.0
maximum-scale=15.0
可以很簡單得知,一開始就是 x 10.0,最大可放大到 x 15.0,如果變化一下
initial-scale=15.0
maximum-scale=10.0
可以發現,初始的放大比例會變成 x 15.0,最大放大比例 還是 x 15.0,推論出來結果就是
*初始、最大值,以最大值為主*。

縮小議題

接著討論縮小,一開始設定數值,
initial-scale=5.0
minimum-scale=1.0
結果跟我們預估相同,初始值 x 5.0,最小縮小值 x 1.0,如果將數值反過來之後會發現,
initial-scale=1.0
minimum-scale=5.0
結果居然是,初始值 x 1.0,最小縮小值 x 1.0 ,最後推論結果為
初始、最小值,以最小為主。
看到這邊相信大家對於數值設定有個認知,接著做個最後小測試,
initial-scale=1.0
minimum-scale=5.0
maximum-scale=0.1
猜猜看,結果為何???
答案,init x 1.0, max x 1.0, min x 1.0,無法放大縮小。

viewport meta 其他參考

另外提供給大家幾個viewport 的使用方式,
如果在手機端我們希望網頁呈現固定,不希望使用者隨意縮放,直接設定如下
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果希望在不同 device 使用不同縮放大小,就必須使用 javascript,偵測UA(User agent),動態設定viewport,片段程式如下,
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

後記

在css media query 中, viewport meta是一個初始化很重要的開始,經過這次開發的過程中慢慢分析,調整才瞭解到裡面一些架構狀況,另外 css @viewport 屬性還有很多種類,詳細列表可以參考 W3C viewport property index table
因為目前移動裝置螢幕尺寸不同,種類需求也都不同,最理想的狀況當然是一種 web 全部滿足,不過依照目前的規格分歧來看,還有一段很長的路要走。

參考資料

  • http://hsinyu00.wordpress.com/2011/04/05/mobile-web-viewport/
  • http://fairyfish.net/m/viewport-meta-tag/
  • http://dev.w3.org/csswg/css-device-adapt
  • http://stackoverflow.com/questions/3588628/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly

留言

這個網誌中的熱門文章

[分享] 腳踏車環島注意事項

很多人都期望自己能夠做點什麼,做些什麼,而退伍之後的第二個星期,就展開了環島之旅。 對很多人來說這不算什麼,甚至有人展開了走路、跑步、溜滑板、單輪車等方式環島一周,充分展現對台灣的愛與關懷。 這篇主要讓不知道怎麼準備環島的人,作一個完善的解說,首先隨身的東西要有: 證件現金類 : 身份證 健保卡 學生證 現金 提款卡 悠遊卡

館長的網站技術瓶頸,小弟弟來解答 - notorious-2019.com

館長的網站技術瓶頸,小弟弟來解答 - notorious-2019.com 昨天看到館長的網站倒了,也看到館長說一個月花費大概一百萬左右的月費在支持這個架設的電商網站,也對外發布出來訊息,希望求救, 直接講結論 建議解法, 1. 首先要做的事情是讓整個網站可以橫向擴展 (Load Balancer + n 台伺服器),對,相信我,IIS 也是可以做 Scale out, 這是對於 Application layer 服務的解法。 2. 資料的部分 SQL 吞吐量,建議改成 GCP Cloud SQL, 或者就直接轉到 Azure SQL Server 環境上會相對容易解決 SQL 的問題。 上述 2 個步驟都處理完,其實 100 萬的費用,應該 20000 concurrent user 是沒有問題的,但前提是要設定『對』! 額外需要花較長期時間要處理的,建議就是在 Queue 的處理,購物車的狀態都可以進入到 Queue 再來處理 SQL insert 的問題,減少不斷的 insert / update 的狀態,後文會提到 ... 底下詳細的會再說明如何後後續還有哪些處理的細節。 這兩天剛好有個小空擋,就來分析一下狀況, 可以從外部讀取得到的服務大致上如下, ASP.Net : 4.0 IIS 10 + Windows (廢話) SQL Server (推測) OP Service: PleskWin Host: Google Cloud DNS: Cloudflare 前端服務內容架構 Server-side render, jQuery base, 推測有可能採用現成購物車來進行,看起來不太像是用 wooCommerce 比較像是 Cart Functionality 這類的項目直接搭建而成(當然這純屬猜測) 功能拆解 因為網站是透過 Server site render 所有頁面都需要重新透過伺服器進行載入,這樣的狀況,如果在頻繁忙碌的 eCommerce 網站架構下會是一個致命傷, 簡單來說,數量的查詢,特惠價,優惠碼等等資訊的處理,使用者每做一步都需要重新跳轉頁面,或者整頁面重新讀取,只是為了部分的資料更新,這些都可以抽取出來成為 API ,透過 AJAX 的方式進行讀取。 讀寫分離 在不了解目前資料庫複雜狀態下,首先要讓所有人都

[教學] 快快樂樂刪除CodeIgniter index.php

預設的CI網址預設都設定為index.php同一層級,因此所有的程式都必須指定index.php導向才能開始,例如 http://localhost/ci/index.php/welcome/test http://localhost/ci/welcome/test 本文將說明如何將惱人的index.php消除,還你一個漂亮的URL。 設定開始: 接下來說明如何使用rewrite方式將惱人的index.php去除。 rewrite不清楚的人,煩請先自行google 首先要先確定Apache的 mod_rewrite 有 開啟 ,如果沒有開啟請設定好之後重新啟動apache。 接著,在根目錄底下建立一個新檔案,檔名為 .htaccess ,裡面程式碼如下: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 接著到 application/config/config.php ,開啟檔案修改 $config['index_page'] = ""; 注意: /index.php/$1 要根據你目錄,例如 http://localhost/index.php ,網站根目錄為 /ci/index.php 則要寫成 /ci/index.php/$1 接著至CI目錄下,尋找 config\config.php , 修改一下裡面的檔案,修改如下: $config['index_page'] = ""; 存檔後,如此一來大功告成。 參考資料 官方網站說明