根據 Apple Web Content Guide 的說明，在撰寫手機版或給特定裝置的網站時，可以在 <head> 中用 <meta> 標籤來設定 viewport 相關的設定。
不過通常這段設定都是 copy / paste，然後再根據需求調整參數。在開新專案的時候也貼了前人的 code，但是卻注意到 Chrome 裡會有錯誤訊息，無法識別這段設定。
Viewport argument value "device-width;" for key "width" not recognized. Content ignored. Viewport argument value "1.0;" for key "initial-scale" was truncated to its numeric prefix. Viewport argument value "1.0;" for key "maximum-scale" was truncated to its numeric prefix. Viewport argument value "0;" for key "user-scalable" was truncated to its numeric prefix.
找了幾段網路上的設定檔，一比對才發現原來很多人把分隔的逗號打成分號，造成錯誤。
錯誤的寫法
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
正確的寫法
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Leave a Reply