移動端介面devicePixelRatio問題與移動端軟鍵盤keyCode

標籤：類型   圖片設計   tail   cheng   ati   比較   type   blank   設計圖   

現在移動端顆粒度越來越小，所以清晰度很高，如華為p9的devicePixelRatio為4，

這是有多變態，devicePixelRatio是物理像素/邏輯像素=倍率devicePixelRatio，所以

如倍率為4，一個像素在裝置上放大了4倍，所以真實4像素是很難在裝置上展示出現的，

只能使用縮放等手段去實現，這就像為什麼1px邊框很難在裝置實現一樣，現在裝置都是

倍率為2，所以經常在網上看到縮小0.5的css方式，這也是為什麼經常可以看到一些UI設計圖

會有@3x\@2x等圖片設計，因為相容3、2倍率的裝置，手機片是最容易被發現模糊化的。

target- densitydpi 已被拋棄，所以不要使用了。

之前一遍介紹過vw，可以使用它，那麼就可以不那麼費力開發了：gulp自動編譯為css的vw單位

資料：

viewport手機邏輯像素與物理像素原理

CSS像素、物理像素、邏輯像素、裝置像素比、PPI、Viewport

 

移動端軟鍵盤keyCode擷取只有keyup與keydown才能擷取，其他都不行，或者有相容問題。
還有一般輸入太快或一次輸入太多到文字框、還有輸入中文等就會出現229，所以這也是問題，
所以我覺得沒必要就不要使用，因為它不想PC端那麼精確使用。
還有軟鍵盤的出現會改變高度，所以可以直接擷取文檔高度確認或resize事件。
還有多個input會在一起不會不斷觸發伸縮軟鍵盤，只會只有第一個觸發後其他再切換觸發不會觸發的。
所以六個格子是可以直接6個input實現。

type類型再移動端是作用比較大。
比如type=number直接就是數字九宮格，不能輸入出了+-.數子之外的字元，
type=tel,就和手機電話的一樣，就只能輸入手機的電話的格式內容東西。
比如數字*#等

 

移動端介面devicePixelRatio問題與移動端軟鍵盤keyCode