1、iphone/android原生app常见结构
似乎,所有的手机应用,都遵循这样的布局:固定的顶部+固定的底部+可滚动在中间区域。这种“雷同”的模式让人恶心,却不得不承认这是一种很规矩却又很实用的体验,或者说已经固化成一种设计模式。这一点好比我之前提到的一篇文章《twitter UI已成习惯》http://jslover.com/?p=305 .
如 果是webapp,我们也希望这样做吗?如果是通过手机浏览器访问,由于浏览器的地址栏、状态栏等本身就占据了一定的高度,所以如果继续在内容页实现这种 上下“fixed”的设计,显然是一种累赘的设计,不过如果想做的更“像APP”,通过一些hack来全屏浏览器,然后再加上这个“fixed”的显示, 还是不错的。另外,如果是将我们的webapp打包成手机安装应用,那么这种“fixed”的设计将成为必须,否则,将“不太像”一个app.
2、通过position:fixed
在pc上,ie6以上的浏览器都是兼容这个属性的,而且ie6也有比较完美的解决方案,见《IE6中fixed抖动问题的解决》http://jslover.com/?p=66
而在手机上,情况就不容乐观了,iso5据说可以支持,没测试过,iso4是不支持这个属性的的,android2.1测试是通过的。
即使手机浏览器完全支持了这个属性,体验上还是不完美的,看下面这个截图就清楚了:
上面这个截图,顶部的导航栏是通过”position:fixed”实现固定位置,不过,可以看的出来,滚动条的区域还是针对整个页面的,在web上无所谓,在手机上,看到滚动条”爬到”导航栏上面一定很纠结吧。
3、使用iscroll
根据我们上面遇到的问题,如果不考虑性能问题,iscroll的解决方案决定是最完美的,几乎完全一致地模拟了原生app的滚动条效果.
iscroll 的实现原理也很简单,上中下三个区域都用绝对定位,header部分top:0,footer部分bottom:0,中间区域top:header的高 度,bottom:footer的高度。然后就是对中间区域进行滚动条事件的模拟。经过测试,在iso上运行顺畅,在android浏览器上存在性能问 题,偶尔会出现浏览器卡死现象。但如果通过webview打包成app,在两个平台上都表现良好,未发现卡死现象。
4、通过appcan框架
appcan 对fixed的处理,其实也不完美,首先是使用css的fixed属性。当然对于不兼容的浏览器框架中封装了一个 zy_fix(..)的function,这个还得依赖于appcan的“壳”,zy_fix对过调用框架的 uexWindow.openSlibing(..)动态生成了一个新的“webview”控件,通过“壳”级别来控制。可惜,它的处理方式还是有些令人 失望,问题和上面的第2点似乎,中间区域的滚动条是针对整个界面的,内容区域都是可能通过“margin”来控制,不过滚动条的显示就没辙了。
appcan官网:http://appcan.cn
5、自定义webview
这种当然也是只能针对打包成app的情况,需要有android/iso开发人员配合。
应用默认初始化3个webview,上面不需要滚动,中间区域可以完美实现滚动。3个webview之间要提供相互访问JS和DOM的接口,当然最好还能动态改变这些webview是否显示等。
纵合以上,如果是基于手机浏览器的在线webapp,不建议使用fixed的设计。如果一定要使用,android版使用”position:fixed”。iso使用iscroll。
如果是打包成app,性能优先,考虑使用第5种方式。开发效率优先,使用第3种方案,毕竟iscroll在android平台上(打包后的应用)效果尚可,在iso上近乎完美。

谈一谈手机WebApp的fixed属性(手机上的固定栏)【转】的更多相关文章

  1. 一步一步构建手机WebApp开发——页面布局篇

    继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...

  2. 谈一谈Java8的函数式编程(二) --Java8中的流

    流与集合    众所周知,日常开发与操作中涉及到集合的操作相当频繁,而java中对于集合的操作又是相当麻烦.这里你可能就有疑问了,我感觉平常开发的时候操作集合时不麻烦呀?那下面我们从一个例子说起. 计 ...

  3. 周记3——解决fixed属性在ios软键盘弹出后失效的bug

    这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...

  4. 一步一步构建手机WebApp开发——环境搭建篇

    从2007年,乔布斯带来了第一代Iphone手机,整个移动互联网发生天翻地覆的变化,也同时证明了乔布斯的一句名言:“再一次改变世界”. 在当今的移动互联网,手机App居多,很多App对移动设备的要求也 ...

  5. IOS系统不兼容position: fixed;属性的解决方案

    position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...

  6. 手机WebAPP设计注意事项和解决方法

    1. 基本手机网页设计 1.1 wap端的网站表头 wap端的网站,写的时候首先注意表头,因为是手机端的,所以和我们平常用的web端页面的不一样,表头为: 1.2 尽量少使用水平滚动. 水平滚动除了比 ...

  7. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  8. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  9. table-layout:fixed 属性的解说

    table-layout:fixed 属性的解说如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用 ...

随机推荐

  1. 窄依赖与宽依赖&stage的划分依据

    RDD根据对父RDD的依赖关系,可分为窄依赖与宽依赖2种. 主要的区分之处在于父RDD的分区被多少个子RDD分区所依赖,如果一个就为窄依赖,多个则为宽依赖.更好的定义应该是: 窄依赖的定义是子RDD的 ...

  2. 【android】开发笔记系列:行为篇

    1:键盘遮挡了输入框 在androidManifest.xml里,对应的activity里设置键盘模式 <activity android:name="活动名称" andro ...

  3. mongodb的安装和权限管理

    mongodb4.0已经发布,但是鉴于线上环境更多的是使用旧版本的mongodb,我们这里使用的mongodb3.4版本. 官网下载地址为:https://fastdl.mongodb.org/lin ...

  4. Web前端学习笔记之前端跨域知识总结

    0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的.但跨域方法的多种多样实在让人目不暇接.老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录. 0x01 什 ...

  5. linux及安全第六周总结——20135227黄晓妍

    总结部分: 操作系统内核三大功能: 进程管理,内存管理,文件系统 最核心的是进程管理 为了管理,首先要对每一个进程进行描述.进程描述符提供了所有内核需要了解的信息. 进程控制模块:task_struc ...

  6. Java第一周学习总结5311

    20145311 <Java程序设计>第1周学习总结 教材学习内容总结 第一章1.1java的历史:总的来说,Java经历了许许多多版本的变迁,目前已经成为一种经常使用的计算机编程语言.J ...

  7. FromBottomToTop团队项目总结

    FromBottomToTop团队项目总结 项目实现情况 关于塔防游戏项目,已实现下列内容 - 游戏设有菜单,附有简介与游戏玩法 - 游戏设有不同的场景地图可供玩家选择 - 通过智能算法,计算小怪的路 ...

  8. Linux网络子系统之---- PHY 配置

    MII即媒体独立接口,也叫介质无关接口. 它包括一个数据接口,以及一个MAC和PHY之间的管理接口(图1). 数据接口包括分别用于发送器和接收器的两条独立信道.每条信道都有自己的数据.时钟和控制信号. ...

  9. hyper-v安装虚拟机ubuntu 18.04 64bit后无法使能增强模式怎么办

    1.获取脚本来使能增强模式 $ sudo apt-get update $ sudo apt install git $ git clone https://github.com/jterry75/x ...

  10. 【同步时间】Linux设置时间同步

    所有节点都要确保已安装ntpd(在步骤4已安装) 1.首先选择一台服务器作为时间服务器. 假设选定为node1.sunny.cn服务器为时间服务器. 2.ntp服务器的配置 修改ntp.conf文件: ...