之前做App時(shí)，因?yàn)锳ndroid原生控件不太美觀，而且各個(gè)版本之間的控件樣式都不一致，所以針對(duì)一些單選、多選、開關(guān)等控件時(shí)，往往會(huì)采取自定義的形式去實(shí)現(xiàn)。
在小程序中，因?yàn)槎际俏⑿胖谱鞯?，控件美觀性及版本一致性上都沒(méi)什么問(wèn)題，所以針對(duì)一些如switch、radio等控件，就不去做自定義處理了。但是，總感覺(jué)這些控件的大小與界面有點(diǎn)不太協(xié)調(diào)，于是就想辦法來(lái)改變大?。?/p>
首先想到的是，通過(guò)width和height來(lái)改變尺寸，但是發(fā)現(xiàn)設(shè)置后無(wú)效，于是想到了important，css變?yōu)椋?/p>
.wx-switch-input{width:106rpx !important;height:50rpx !important;}
.wx-switch-input::before{width:106rpx !important;height: 50rpx !important;}
// 中間圓球尺寸
.wx-switch-input::after{width: 44rpx !important;height: 44rpx !important;}
但是，這樣雖然在iphone 5上正常了，但是在開發(fā)者工具切換屏幕時(shí)，且發(fā)生了尺寸問(wèn)題，特別是切換到ipad尺寸時(shí)，switch切換后居然圓球在中間位置，不在右邊，所以，這樣切換不太合適。
然后，css中有zoom屬性，試下：
.zoom {
zoom: .6
}
將zoom加入想要設(shè)置的控件中，在開發(fā)者工具中，手機(jī)尺寸基本都正常，但是在ipad中，顯示的尺寸比其他文字小了很多，但是比上面important改變尺寸而言，至少控件時(shí)正常的，圓球不會(huì)出現(xiàn)到中間位置。
最終考慮，應(yīng)該根據(jù)不同屏幕尺寸設(shè)置zoom的值，手機(jī)設(shè)置一個(gè)zoom值，pad根據(jù)屏幕尺寸設(shè)置為其他zoom值。
個(gè)人博客: IT老五
微信公眾號(hào)：【IT老五（it-lao5）】，一起源創(chuàng)，一起學(xué)習(xí)！
