响应式HTML5+CSS3 网站开发测试实践

仅仅利用media query适配样式是远远不够的,并没有考虑触屏下的行为和特有的内容组织方式的不同。简单在桌面版基础上叠加mobile版的代码,会带来请求增多、流量、性能、代码冗余等诸多方面问题。有统计说86%的手机站看起来small其实体积比桌面版还大。

我们这次充分发挥“响应”的灵活性,实现one web。

响应式开发就为了实现one web:

1. 响应性的模块
原本网站的模块化程度越高越便于做响应性开发。一个page例如是这样组织的:
<%include file=”path/mod1.html” args=”data=data” />
<%include file=”path/mod2.html” args=”data=data” />
如果在手机下访问,模板系统在生成这个页面时,会在path/下找mobile.mod1.html,有则加之,否则加mod1.html。也就是说在同一目录下,会存在多个版本的模块,当前只有2种:mod1.html(桌面版),mobile.mod1.html(mobile版)

响应部分的代码,跟主站代码是放在一起的,这样更便于维护。一个页面模板的结构是这样的:

page1.html:

<%inherit file=”/base.html” />

<%def name=”main”>

桌面版主要内容

<%include file=”path/mod1.html” args=”data=data” />

</%def>

<%def name=”sidebar”>

桌面版边栏内容

</%def>

<%def name=”mobile_main”>

<%block filter=”collect_css”>

mobile版css

</%block>

mobile版主要内容。如果可以复用,直接调${self.main()}

很多情况下内容是不同的,比如去掉不必要的模块。

</%def>

<%def name=”mobile_sidebar”>

mobile版底部内容

</%def>

这意味可以同时开发/维护两个版本。(同样,设计师在设计一个页面,也需要秉承mobile first的原则)
在同一目录、同一文件维护比分布在不同的仓库中要方便的多。

2. 响应性的css/js
mobile版的变化很大,在样式上并不是桌面版css+mobile版css的关系。这得益于我们之前对静态文件管理系统的改造。传统的css的组织方式是集中式的,集中在几个通用文件中,形如base.css + product.css。而我们现在的方式是base.css + mod_1.css(inline) + mod_2.css(inline) + mod_3.css(inline) … 是按需组合的形式。

这样,加上设备判断后就可以轻易变成:
mobile.base.css + mobile.mod_1.css(inline) + mobile.mod_2.css(inline) + mobile.mod_3.css(inline) …

css/js文件跟模板一样,在同一目录下分别有桌面版和mobile版。根据访问端的情况,自动适配、按需组合。这样可以得到一个更优化的mobile站。

3. 增强触屏行为和兼容桌面事件
前者是指附加触屏上特有的事件:touchstart/touchmove/touchend以及手势swip/pinch/rotate/shake。这个不是难点。

mobile浏览器和桌面浏览器的事件模型有明显差异,为了完全复用桌面版的各种js组件,首要问题是设法兼容桌面事件(click和mouse事件)。

mobile上的click和mouse事件有几个需要注意的地方:
a. click和mouse事件不会发生在不可点击的元素上,意味绑在document上的事件代理完全失效
b. mouse事件是发生在手指离开屏幕后,且顺序是mouseover > mousemove > mousedown > mouseup
c. click事件最后触发。从手指离开屏幕起,有约300多毫秒延迟,而且有可能不会被触发

见下图:

“If the user taps a clickable element, events arrive in this order: mouseover, mousemove, mousedown, mouseup, and click. The mouseout event occurs only if the user taps on another clickable item. Also, if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent.”(出处)

android/ios不支持beforeunload事件,对unload事件的支持有些怪异,需要用pageshow/pagehide事件替代。

以上事件的差异都是要尽力消除的。解决思路是利用jQuery的special event机制覆盖掉原本的事件绑定。即:node.click(fn),mobile上转向node.touchend(fn) 。实现的代码:https://gist.github.com/3358036

4. 优化和用户体验

a.去掉了apple-mobile-web-app-capable声明。单页应用要加上,用响应式开发的加上这句体验反而不好,跳转的链接会弹出窗口打开。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
## <meta name="apple-mobile-web-app-capable" content="yes">

b. “If the user taps a nonclickable element, no events are generated.”(引自Apple Dev Center),所以:

body {
cursor:pointer;
}

c. 设定内容中图片的最大宽:

.topic-content img {
max-width:100%;
}

d. 加载提示,感觉像异步加载。

e. application cache本身是为web app设计的,在响应式开发中的应用是不同的。
把大文件在手机端cache起来:

CACHE MANIFEST
# version 0.0.1
CACHE:
${static(‘/js/jquery.min.js‘)}
${static(‘/js/do.js‘)}
${static(‘/css/mobile/base.css‘)}
${image_url(‘/pics/icon/dou.png‘)}
${static(‘/css/ui/dialog.css‘)}
${static(‘/js/ui/dialog.js‘)}
${static(‘/js/mobile/jquery.mobile.events.js‘)}

这个文件是动态生成的,好处是当文件更新后,文件名中的签名会跟着变,也就会触发手机端app cache的更新。

判断cache更新:

if (window.applicationCache) {
window.applicationCache.addEventListener(‘updateready‘,function(){
window.applicationCache.swapCache();
}, false);
}

为了避免动态页面被cache,在一个隐藏的iframe里指定它。(更改,还需要进一步测试)

f. mobile上的UI库,比桌面版更有必要。

5. 调试和监测

用了两个工具adobe shadow和自带的tcpdump,对android/ios均适用。

a. adobe shadow 出了一段时间了。原来的问题是它要走adobe的weinre server,慢!终于最新版4已经可以指定本地的weinre server了。怎么启用本地weinre server是另外话题自己去搜吧,我是用jar启动的,作者网站提供各种版本:http://people.apache.org/~pmuellr/weinre/builds/1.x/
>java -jar ~/weinre-jar/weinre.jar –boundHost 10.0.2.48  (ifconfig查具体ip是什么)
weinre server启动参数:

–httpPort [portNumber] 改变HTTP服务器的端口号 8080
–boundHost [hostname | ip address | -all-] 改变主机名。如果使用默认的localhost,将无法从另一台机器访问该服务器 localhost
–verbose [true | false] 记录标准输出行为 false
–debug [true | false] 详细的操作日志输出到标准输出 false
–deathTimeout [seconds] 指定超时 3

安装shadow,同时手机上安装shadow client。

指定本地server:
 手机打开shadow client直接找ip。shadow其实就是对weinre包装了一层,它的inspector其实就是weinre调web inspector调试。

b. 用tcpdump监测http请求(参考这里)。步骤:

step 1: 建一个wifi热点
step 2: 用tcpdump命令捕获tcp的traffic,命令:
sudo tcpdump -i en1 -n -s 0 -w group.pcap tcp or port 53
(参考tcpdump用法http://www.tcpdump.org/tcpdump_man.html)
step 3: 手机联上热点,打开网站(先清cache)
step 4: Ctrl+c停掉tcpdump,log保存到指定的group.pcap文件中。pcap(packet capture)
step 5: pcap转成har文件浏览,http://pcapperf.appspot.com 或导入到charles里查看也很方便,分别看下图:

c. 在线工具:mobitest.akamai.com (说是开源了)

响应式HTML5+CSS3 网站开发测试实践

时间: 2024-10-25 01:51:30

响应式HTML5+CSS3 网站开发测试实践的相关文章

12款高质量的响应式 HTML5/CSS3 网站模板

HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 经典网页设计:25个应用视差滚动单页网站 经典网页设计:20个新鲜出炉 HTML5 网站 经典网页设计:20例简洁精美着陆页面设计 经典网页设计:20个简约风格电子商务网站 Runkeeper Prologue Zvalencia

30套免费的响应式 HTML5 &amp; CSS3 模板下载

HTML5 和 CSS3 网站模板存在巨大的需求,网页设计师们都喜欢现成的网站模板,能够轻松地设计和开发美观,吸引眼球的网站.如果你正在寻找响应式的 HTML5 & CSS3 模板,那么你找对地方了,这里罗列了30套免费的响应式模板,可以免费下载 温馨提示:点击图片进入的页面有下载链接,尽情的下吧,下吧. 您可能感兴趣的相关文章 35款精致的 CSS3 和 HTML5 网页模板 12款高质量的免费 CSS 网站模板下载 25款创新和免费的精美 CSS 网站模板 12款高质量的免费 HTML 网页

12个新潮的 HTML5 &amp; CSS3 网站设计欣赏

响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 您可能感兴趣的相关文章 那些让人赞不绝口的创新 HTML5 网站 激发你灵感的20个多彩的网页作品案例 30个独具匠心的精美单页网站设计案例 20个与众不同的网页联系表单设计案

16个最佳响应式HTML5框架分享

HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分流行.如果你也对HTML5框架感兴趣,你可以看看下面我列出的一些最佳的响应式HTML5框架,帮助你快速开发网站. 1. Twitter Bootstrap 海量技术文章:http://tieba.yunxunmi.com/ 云搜 http://so.yunxunmi.com/ 让搜索更简单 采用ht

干货分享!12款响应式的移动网站模板免费下载

如果你打算开发网站,你想要关注的第一件事就是网站的外观和感觉.另外用户体验很重要,现在是属于移动互联的时代,用户有可能通过移动设备浏览你的网站,因此同样重要的是要考虑你的网站在移动端的使用体验. 这个特殊的列表包含一组基于 HTML5 和 CSS3 的移动网站模板,你可以免费下载这些模板,没有任何限制.赶紧收藏吧:) 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实

16个最佳响应式HTML5框架

本文由PHP100中文网编译 HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分流行.如果你也对HTML5框架感兴趣,你可以看看下面我列出的一些最佳的响应式HTML5框架,帮助你快速开发网站. 1. Twitter Bootstrap Bootstrap来自Twitter,是目前最受欢迎的前端框架,它简洁灵活,使得Web开发更加方便快捷.它有着优雅

[IOS_HTML5]各种JS框架介绍--用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具. 在文章的末尾,也介绍了使用JAVA.C#.Lua以及AS3来开发安卓应用的工具. 希望大家都能找到适合自己的开发工具!祝大家开发安卓/IOS应用一切顺利! PhoneGap 开发语言: HTML, CSS, JavaScript 开发工具: Ph

扁平化设计的 HTML5 &amp; CSS3 网站模板

Persona – HTML5 Parallax Portfolio Theme 充满吸引力的一款网站模板,扁平化设计风格,动感的视差滚动效果. 在线演示     模板下载 Superb – Responsive One-Page Portfolio Superb 是一个基于 HTML5 & CSS3 的响应式单页作品集网站模板. 在线演示     模板下载 Next – Unique & Easy Portfolio Template 这款精美的网站模板提供了三套风格的设计:全屏背景.单

响应式:为什么百度、淘宝之类的大公司网页不使用响应式,而是独立开发一套手机页面?

响应式设计不是万能的,它有一定的好处,但也有一定的弊端.先给出结论:如果开发资源充裕,不应该考虑使用响应式设计来同时支持移动端和桌面端. 因为响应式最大的优点就是开发快.打个比方,移动端和桌面端的开发时间分别是 t,采用响应式设计写一个同时支持两者的网站可能只有 1.2t. 那为什么开发资源充足的情况下,不应该采取响应式设计来同时支持移动端和桌面端呢? 1. 响应式设计带来大量冗余代码.在移动端充斥着 webkit 内核的浏览器的时代,响应式设计的网站中却不得不带有大量兼容旧 IE 的代码.移动