这就需要我们开发者对于屏幕内容(菜单等信息)做出处理,扩大可操作范围,以满足用户的需求。
我们不仅需要在开发设计的阶段考虑这些问题,在项目上线之前也一定要在真机环境下测试,而非仅仅在浏览器中点点即可。
例如:我们日常所使用的微信,虽然底部 4 个菜单的占用位置不大,但是可触控的范围却是很大的,大家可以试一下,如下图所示:
5.2.2、特殊样式
实现多种特殊控件的交互,如多选、下拉菜单等等。
例如:如下图所示,在华为云官网的弹性云服务器的控制台这里就做了一个很好的处理,我们可以看到在 PC 端和移动端的交互方式也是不一样的。
PC 端的控制台如下图所示:
移动端的控制台如下图所示:
小结:曾经的我们是以简单的自适应来满足对系统功能的需求,而现在简单的自适应已经无法满足日益增长的用户移动端需求了。很多开发商都是专门做两套不同端的应用以满足用户。
5.3、编码
编码是开发人员的立足之本,只是“会写”是不行的,更要结构坚固、形式优美……
对于上面例子的表单内容,我们在代码方面做如下分析:
我们使用了如下几个熟悉的前端标签:<form>、<label>、<input>、<button>
可能有人会说,“哎你为什么不直接用<div>
呢,<div>
和 js 不香吗?”
<div>
和 js 能有什么坏心眼儿呢,无非就是让你写了不必要的代码。“最好的食材往往只需要最朴素的烹饪方式。”
5.3.1、form 标签
<form>
可以最大限度的保证功能的正常执行。它具有 div+js+jquery 无法满足的功能,具有 action、method,同时 form 标签可以保证页面在 js 与 jquery 无法加载成功的前提下表单正常提交,而不依赖于整个前端框架的加载,这是一个分离的思想。
只谈技术,国内前端的标杆目前还是淘系团队。如下图所示,淘宝目前登录页使用的还是 form 标签,这就说明 form 承载淘宝这种大用户量级别的登陆需求是完全没问题的。