记录最近在搞的一个单页面计算器。主要坑点在于日期控件。还有一开始我用px 单位。在安卓平板显示偏小,所以用rem来代替。设置html中的 font-size 大小就可以等比例缩放了。
首先呢,我开发的这个页面的是 vue模版,用CDN 引入vue 依赖,然后提供给安卓平台使用的。安卓端,用webview 显示我的页面。
一开始我用 <input type='date'> 这个来显示和使用日期控件的。在安卓 webview 使用的时候,会调用安卓的日期控件。坑点一,这样的日期控件字体太小,而且居左显示了,安卓开发人员无法调大字体和调位置。所以这个放弃了。
本来想省事,结果没得逞,那就改用iview 的日期控件,这里显示的字体图标,我在github下载对应的iconfont.css,iconfont.svg,iconfont.ttf,iconfont.woff 等文件。 在chrome 显示良好,在安卓平台调用的时候,触发了input事件,把键盘弹出来了。input 封装在 iview 的日期控件<DatePicker> 里面,不好折腾,还有iview 也不适配移动端。又放弃了。
找一个适配移动端的ui框架, 有 vant.ui ,weui,mint.ui 等等 ,mint-ui用的次数比较多,所以选这个。用CDN 引入css, js 文件等。这是一个滚轮的方式的。一开始 UI觉得也可以。先用着。隔天来个图,把这个推翻了。又要找日期控件了。
在网上找了 ,layui 的一个 laydate 日期控件,这个是用js是实现的,可以绑定在div上,这样就不用对input作处理,兼容性好。美观。 使用简单。所以就用这个了。
传送门 https://www.layui.com/laydate/
如下: