最近添加了一個小功能要來測試成效
就是因為 PM 有看到一些服務的連結在 iOS Messages 上呈現並非常見的圖片而是影片
PM 說好像是 iOS 15 以上支援(我自己是沒找到相關的資料證明這件事)
不過應該沒支援的話就呈現圖片
查了一下文件, 其實也不難
基本上就是定義 open graph
多定義
<meta property="og:video" content="http://www.example.com/sample.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video:width" content="1280" /> <meta property="og:video:height" content="720" /> 這邊有個要注意的點是
原來是產出 1:1 的影片, 但發現會上下截掉
所以最後採用 16:9 的比例
# demo Your browser does not support the video tag. Refer - Best Practices for Link Previews in Messages
...
Category: Ios
# 前言 最近注意到 Safari 設定 100vh
在未滿內容的情況還是出現滑動的卷軸
這導致了體驗不佳
研究了一下發現是因為在 Safari 上有 url bar 的關係(iOS 15 以下還有 function bar)
100vh 的大小其實是這些 bar 隱藏時的大小(iOS Safari 滑動時這些 bar 會隱藏起來)
這邊試了幾種方式
# 改成 100% 可以改成用 100% 來取代 100vh
不過這得依情況來使用
# 使用 -webkit-fill-available -webkit-fill-available 目前只有 iOS 支援
所以可以用 useragent 來處理樣式來對應使用這個 CSS 屬性
範例
# 結論 我自己測試了一下會偏好使用 100%
個人會希望能夠簡單處理方式就用簡單的方式處理
...
# web - mobile web on iPhone X first preview ## Intro On 2017 9/12.
Apple published iPhone X.
And this device has so special screen.
So many web & iOS developer worry about some case like.
(form Apple)
OMG!
It can effect app show on full screen.
So Apple has provide guideline about iPhone X.
iPhone X - Overview - iOS Human Interface Guidelines
It is great change for web & iOS developer.
...