木子屋
 

标题: 增强用户体验修改一例

作者: dnawo

日期: 2014-05-19 01:08 PM

分类: 脚本语言

内容: 给客户做了一个微信上的订单查询页面，反馈说输入内容时输入框被遮挡住了，用户体验不好：
原因是版权一处设计成浮动的，始终显示在浏览器底部，当输入内容时打开了手机输入法占据了一部分空间，进而使浏览器窗口变小，版权向上浮动导致输入框被遮挡。虽然即便没有被遮挡，若要输入订单号也仍需向上拉动页面，但被遮挡用户体验上终归不好，必须的必须改。
修改目的很明确：打开手机输入法时让版权消失。简单暴力的修改方法是取消版权浮动，但这会带来新的用户体验问题，比如在PC浏览器打开页面然后最大化， 版权可能显示在页面中部。有没有更好的解决方案？办法总比困难多，最终解决方法是保持版权浮动，仅在浏览器窗口高度小于文档高度时暂时隐藏版权，几行脚本就能解决，代码如下：
复制内容到剪贴板 程序代码$(window).resize(function () {
    if ($(document).height() > $(window).height()) {
        $("div[data-role='footer']").hide();
    }
    else {
        $("div[data-role='footer']").show();
    }
});

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.598 ms

标题: 增强用户体验修改一例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.598 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.598 ms