跳到主要內容

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

留言

這個網誌中的熱門文章

npm 還可以看影片,沒想到真的有人這麼做

 還真的有人做這件事情, 庆余年2剛上線,有一位小哥竟然利用 npm 包的機制,將整套高清視頻都搬上來了。 https://x.com/fengmk2/status/1791498406923215020 圖片來源, https://x.com/fengmk2/status/1791498406923215020/photo/1 此 Package 出處 https://www.npmjs.com/package/lyq2?activeTab=versions 截圖留念, 機制說明 NPM(Node Package Manager)是一個流行的 JavaScript 軟件包管理器,用於管理和分發 Node.js 應用的依賴。它允許開發者將自己的代碼打包成「包」,並上傳到 NPM 的公共註冊表,供其他開發者下載和使用。這個過程通常包括以下步驟: 創建 NPM 包 :開發者將自己的代碼和相關文件打包成一個 NPM 包。 上傳到註冊表 :將包上傳到 NPM 的公共註冊表。 下載和使用 :其他開發者可以通過 NPM 命令行工具下載並安裝這些包。 這位小哥利用這一機制,可能是通過將整套高清視頻文件打包成 NPM 包並上傳到公共註冊表。其他人只需通過簡單的 NPM 命令即可下載這些視頻文件。 影響 版權問題 :這種行為涉及明顯的版權侵犯。高清視頻通常受到版權保護,未經授權的分發和下載都是非法的。 NPM 註冊表的可靠性 :這類內容的出現可能會損害 NPM 註冊表的可靠性和聲譽。NPM 註冊表是開發者分享和使用代碼的重要平台,如果充斥著這些不合法的內容,會影響其公信力。 潛在的安全風險 :將視頻文件偽裝成 NPM 包可能會帶來潛在的安全風險。下載這些包的用戶可能會無意中下載到惡意軟件或其他有害內容。 技術濫用 :這一行為展示了技術的濫用,原本為了方便開發者分享和使用代碼的機制,被用來分發非法內容,會對整個開發者社區造成負面影響。 歡迎留言給我,讓我們得到更多討論,一起回饋更多可能。 如果對於技術架構或者技術開發有相關需要顧問教育訓練服務或專案開發,聯絡方式如下,或者是與皇漢科技 EXMA-Square 進行聯繫。 FB: https://www.facebook.com/clonncd/ Twitter: https://twitter.com/clonncd 熱血漢誌: htt

面試者如何挑戰大工程師時代來臨?

面試者如何挑戰大工程師時代來臨? 全世界都在倡導轉職成為工程師,似乎轉職成為工程師就成為職場的救贖,真的是如此嗎?讓老衲來杠給各位聽。 最近有位好久不見的小朋友,是 2000 年出生的小蔡,對於即將面臨到面對職場的挑戰開始關心起技術,他開始尋找比較適合自己的領域,同時也開始在思考到底為了接下來的就職小蔡該如何準備。 詢問我說是不是可以考慮軟體開發工程師這條路線 對於他的詢問,反而引起我的注意, 這讓我開始思考並映射於最近招募的經驗,軟體開發此領域是不是對於每個人都是可以擔任的職啀,這邊分享一些自己的看法希望對各位有所幫助。 全民工程師這件事情 在全球景氣低迷的狀況下,的確特別在這一年大家會很有感覺萬物齊漲,薪水不漲,薪資就是一直停滯不前。 很多時候,在不同的領域中,會發現整個薪資就算是擔任了管理職務主管你也會面臨到薪資的強大屏障在自己面前。 這個時候, 軟體工程師年薪百萬口號 似乎就成了一種救贖。 好像成為了工程師就可以達到年薪百萬,在家輕鬆工作,不用打卡也不用受到風吹雨淋,隨時想工作就可以工作,每個月又有固定薪水入帳,感受到類財富自由,人生的美好。 如果能夠爭取到跨國公司的職位,這份薪水有可能還可以上看每個月十多萬以上,甚至是往上也是極度有可能的事情,人生美好層次又再度提高了起來。 但這件事情是真的每個人都可以達到嗎? 還是這就是另外一種性存者偏差呢? 亦或者這些人其實是金字塔頂端的小眾? 每份履歷都像是同一種履歷 最近在最近幾年在面試工程師的時候特別會看到許多轉職者,一開始履歷裡面看到相關的作品一開始會覺得十分的驚艷, Wow, 現在的新手就可以做到如此精美的畫面,這些畫面是我當初用 Bootstrap 也做不出來的東西,許多的互動體驗好的一個不行,做出來的頁面配色和對齊也是極致。 但是隨著時間推移,多看了幾封履歷之後,就會發現在各大技術養成學院出來的學生履歷成果內容如出一轍,在面試的過程中也會詢問許多關於框架的底層概念,和比較技術觀念的時候,甚至是許多框架的核心概念,就很容易露出馬腳。 很多面試者會 一問三不知 ,透過許多引導,但殘酷的是連關鍵字是什麼都也無法推敲出來,更不用說在小組裡面到底怎麼樣合作,許多不同線上產品的比較,使用者流程,使用者後面的互動邏輯等,幾乎是風吹一片倒,只能

初級工程師的迷霧:解析開發中常見的困擾與挑戰

在我和工程團隊的共事歷程中,我注意到初級工程師經常遇到的問題。這些問題,無論在面對簡單或複雜的挑戰時,都能體現出來。歸納起來會有常見以下幾個面向。 簡單的問題 發現許多初級工程師在面臨簡單或複雜的問題時,常有可能會遇到困難,時常會有一種繞圈圈的氛圍, 常見問題分別有, 問題本質 首先是對於問題本質上並沒有釐清完成的目標,以及問題本身是要解決什麼樣的商業問題,客戶問題,導致於因為總總原因,做了 scope 過大,或者,花了過多時間進行 over design 的問題發生。 過度依賴套件 發現在新手開發中,會發現為了解決單一問題,卻引用了一大包的 libary 或者引用了不適合此問題的套件。在求解的過程中,容易導致要解決套件的問題,而忘記了要解決的問題是什麼。 複雜的問題 我們在面對複雜的問題時,經常會因為缺乏策略與經驗而感到困惑,反而在處理看似簡單的問題時,卻可能因為過度依賴套件或缺乏組合技巧,而陷入泥淖。不論是複雜或是簡單的問題,我們都需要找到更有效的解決方式。 不論是經常過度依賴套件求解,又或者複雜的問題不知道如何拆解。因此導致新手可能會感到無所適從,不知道如何運用組合技巧。因此,他們往往在處理看似簡單的問題時,容易陷入困境,導致專案的時程延宕。 特別是各自工程師都有開發壓力時,身為新手開發者就更難與資深開發者進行討論,從中汲取前輩的經驗,轉化成自身的價值發生。 解決的方向 上述的問題,自己再開發的時候也或多或少會發生,當然在新入門者更是容易深陷其中,不知如何自拔。 除了參與社群,從傾聽到互動的過程中,從前輩的經驗進行思考及內化的過程。 在 AI Generated 時代,我們可以透過 LLM 透過適當的思考方式和問答過程,逐步的逼近答案,也許是一條可以進行的道路。 這裡,會以透過內部訓練的經驗,提出如何以 ChatGPT 這樣的工具為例,提升對於新手工程師的幫助。 透過 ChatGPT,我們可以解決許多類似的問題。例如,我們可以透過 ChatGPT 建立一個問答系統,進行問題分析,或是請 ChatGPT 提出最適合的工具和方法來解決問題,尤其是那些可以透過使用基礎 function 就能處理的簡單問題。這不僅能讓我們避免過度依賴套件,更能發掘並利用基礎工具的能力。 工商時間 7/3 (週