分類
Javascript

[HTML]滿版介面

在 web 上做滿版不要出捲軸的設計要如何進行? 主要是要配合 100vh 來操作. 不過由於實務上, 在行動設備下, 會遭遇瀏覽器在計算上方網址列的狀況不同, 如下:

1. iOS Safari 不含網址列
2. iOS Chrome 含網址列 (也就是全高)
3. Android Chrome 不含網址列

這樣的狀況, 所以若是使用 100vh 操作, 仍會有對應不良的困難, 所以建議改用 window.innerHeight 來取得實際的版高, 再來進行套用.

需要監聽的事件為 document ready, window resize, window orientationchange 三個地方, 而套用方式建議使用 css cssText 語法, 能較為準確的套用, 不會有指定高度時, 無法實現的狀況.

參考範例: https://codepen.io/timhuang/pen/pxbwLp

手機版直接測試: https://codepen.io/timhuang/full/pxbwLp/

另外簡單說明如下:

jq 取得 body margin-top 與 margin-bottom 會是 ?px 的文字, 使用 parseInt 可以轉回數字. 而 innerHeight 取得本來就已是數字. 而在原 css 中的 height: 100px!important, 是用來測試在 resizeFull function 中, 使用 css 套用, 亦可蓋過原 css 中的 height important.

分類
好用軟體

好用的縮圖與快取服務(images.weserv.nl)

在查找 imgproxy 專案時, 找到的一個圖片快取、調整大小的一個服務:

https://images.weserv.nl/

在網站應用上, 這種使用情境是很常見的需求, 當然, 自己寫或是用已有的專案都能解決, 如前面提到的 imgproxy 專案:

https://github.com/DarthSim/imgproxy
https://github.com/willnorris/imageproxy

不過像是 weserv 這樣的, 可以直接使用的服務就更方便了. 接下來來測試一下效果. 以這張圖為例:

https://www.flickr.com/photos/okilyt/35120121534/sizes/l

在 flickr 上會生成許多尺寸, 如下(連原始圖共12種類):

Original (4512 x 3008)
Large 2048 (2048 x 1365)
Large 1600 (1600 x 1067)
Large 1024 (1024 x 683)
Medium 800 (800 x 534)
Medium 640 (640 x 427)
Medium 500 (500 x 333)
Small 320 (320 x 213)
Small 240 (240 x 160)
Thumbnail (100 x 67)
Square 150 (150 x 150)
Square 75 (75 x 75)

利用 image.weserv.nl 來進行對應操作, 會使用到的參數就是 url, w, h, t (基本的參數), 先來介紹一下簡單用法, url 為必要參數, 因為是快取圖片來源的基礎, 不需要給 protocol, 從 host 開始即可, 如

http://sample.diary.tw/imgs/001.jpg 只需要給 sample.diary.tw/imgs/001.jpg (需要 url encode)

接下來是 w 寬度參數, 預設會成比例縮小, 若是 w, h 同時給, 則以較小的為約束邊, 進行縮小, 若是再給定 t=square 則用來限制縮小的圖為方形縮圖, 要了解更多就參考網站上的說明:

https://images.weserv.nl/#quick-reference

相信很快就能上手.