pCloud Partner Program

[HTML]滿版介面

程式技術/Javascript 2018/10/05 15:43
views: 10231 times
在 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.
top

Trackback Address :: http://diary.tw/tim/trackback/1217

Write a comment


PREV : [1] : [2] : [3] : [4] : [5] : [6] : ... [501] : NEXT



DJI Tello 小米萬能遙控器 手機App操控
Microsoft Office 365 中文家用版PKC (無光碟) ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U
美國 VORNADO 533 渦流空氣循環機 (黑色) 御茶園 每朝健康綠茶(650mlx24入)
每朝健康 雙纖綠茶(650mlx24入)


 Waiting...