# 前言 不管在 mobile 還是 desktop 都有個困擾就是要處理用戶縮放頁面的問題
如果只是資料類型的頁面, 縮放的話大多都只是畫面 UI 跑版
但如果是複合功能型的頁面, 縮放的話大概率會讓功能壞掉
就得找一些方法處理
# 確認可行性 JavaScript 有一個 api window.devicePixelRatio 是顯示畫面解析度比率的
早期可以用這個是不是 1 來判斷
但是螢幕的解析度其實會影響這個值
所以這個 api 沒有辦法當作判斷的基準
resize 事件可以在頁面縮放時會觸發
搭配 window.outerWidth/window.innerWidth 的值的變化可以知道有沒有縮放
但是這在 mobile device 的兩指縮放是不會觸發
所以也沒用…
但是針對 mobile 兩指縮放
可以使用 window.visualViewport
window.visualViewport.scale 可以知道現在縮放比例
如果只是要判斷有沒有所放的話
可以使用 resize 事件 + mobile 判斷來拿取 window.visualViewport.scale 或是 let zoom = window.outerWidth/window.innerWidth; 的組合來處理
sample code
let zoom = window.outerWidth / window.innerWidth; function isMobileDevice() { return /Mobi/i.
...
Category: Mobile
# Web Develop on mobile web & WebView 因為某些原因必須把這些東西紀錄一下
其實實在太多東西要寫但實在是太忙且有點沒動力寫文章…
會分成兩個 mobile OS 與 mobile browser 加上 WebView 共 4 部分
Android
mobile web WebView iOS
mobile web WebView ## Android 需準備的東西
電腦版的 chrome browser Android 手機(需要有 Android Chrome browser) 在 2018 年的當下這裡不想再提非 chrome browser 的開發, 因為很難 debug
以下就簡單說明一下
### 1. 首先得把 Android 手機的開發者模式打開 設定 -> 關於手機 -> 軟體版本
找到軟體版本的選項就一直點, 直到點出提示您現在已成為開發人員, 這樣就可以了
進去開發人員選項 把 USB 偵錯模式 打開
### 2. 連接手機到電腦 ### 3.
...