新案上線 Lexus All-New ES -css篇

大家好,我是奶綠茶
這次專案用到了
ThreeJS
WebGL Shader
VueJS
RxJS
Webpack
記錄一下遇到的問題與決解方法

iOS 各種雷踩到飽

整個網站概念是 landscape 滿版,但偏偏 iOS 的結果跟你想的是不一樣

測試1:將 html, body 寬高都設成 100%
https://milkmidi.github.io/lexus_es_development/01.html

portrait:
底圖高度有完整的程現,右下角物件也完全的定位。


Landscape
height 100% 不會扣掉 safari nav bar的高度。
所以你的網頁就會超出整個頁面
整時網頁還可以上下移動。
滑上滑下後,nav bar 就會消失。網頁就可以真正的滿畫面


但這樣的結果不是我要的,因為底圖會被切掉。

測試2:用 JS 取得 window.innerHeight
https://milkmidi.github.io/lexus_es_development/02.html

高度對了,但網頁還是可以上下滑,然後就會露白。


用 touchmove preventDefault 檔掉該事件
因為是對最外層的 dom 偵聽,preventDefault 並不會影響子元素的 touchmove 事件

app.addEventListener('touchmove', function(e) {
e.preventDefault();
});

再用 gesturestart preventDefault 檔掉兩指放大功能

document.addEventListener('gesturestart', function(e) {e.preventDefault();});

最後在 window resize 時,加上 window.scroll(0,0)
這樣就可以讓 landscape 的網頁定在我們要的位置

測試3:iOS Line Webview issus
https://milkmidi.github.io/lexus_es_development/03.html
當一切都完全時,團隊在測 line Webview 時,發生了跑版問題
查了一下才發現
iOS Line Webview 轉直轉橫時(會觸發 window resize 事件)
當下取得的寬、高是錯的(WTF),而且不是每隻 iOS 都會發生(對,偏偏客戶的那隻就會有問題)。
沒辦法,只好在 orientationchange 時,加上 setTimeout 再取得 window 寬高。

測試4:同時偵聽 resize, orientationchange ,事件會重復處理
https://milkmidi.github.io/lexus_es_development/04.html
網站用了 WebGL, 為了提高效能,不必要的處理應該要避免
在這使用了 rxjs

透過 rxjs distinctUntilChanged 判斷數值是否有更改

下一篇再來分享 ThreeJS 開發心得