文章分类: Mobile Web

debug–在线代码调试工具

发表于 作者
回复

工具地址:http://debug.cnodejs.net
这个工具主要是为群里面同学们的提问发代码用的，webapp开发可以方便js调试。
主要功能点：

  • 分享代码，仅支持html,javascript,css；
  • 代码高亮
  • 生成可运行的html文件
  • 支持手机访问运行页面，生成二维码文件地址；
  • 支持手机访问的console信息打印在pc的控制台,需要添加一段js，并且调用wa.log()

项目地址：https://github.com/xiaoqiang/debug

web app/mobile web开发入门

发表于 作者
回复

欢迎加入webapp前端开发QQ群：115187143

基础知识篇—–摘自：webkit webApp 开发技术要点总结

1. viewport：
也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4 个：

width -             //  viewport 的宽度 （范围从200 到10,000，默认为980 像素）
height -            //  viewport 的高度 （范围从223 到10,000）
initial-scale -     //  初始的缩放比例 （范围从>0 到10）
minimum-scale -     //  允许用户缩放到的最小比例
maximum-scale -     //  允许用户缩放到的最大比例
user-scalable -     //  用户是否可以手动缩 (no,yes)

那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //编码
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />  // 离线应用的另一个技巧
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  // 隐藏状态栏
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式
<meta content="telephone=no" name="format-detection" />       //告诉设备忽略将页面中的数字识别为电话号码
<meta name="Author" contect="Mr.He"/ >

在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。(请参考：指尖的下JS 系列文章)
更多内容 →

webapp水平垂直滚动demo

发表于 作者
1

先放个访问地址（请使用android/水果系列移动设备访问）：http://xiaoqiang.org/demo/webapp

用爪机可以直接扫这个二维码webapp
demo介绍：

  • 横向滚动，置顶固定菜单；
  • 纵向滚动，支持滚动条；
  • 横屏竖屏宽度自适应；
  • 载入自动隐藏地址栏；
  • 锁定viewport；
  • 滚动条在用户触屏的时候才显示，非触屏状态隐藏；
  • 锁定滚动方向，横向的时候不能竖向；（感谢qbaty协助优化体验）。

测试机器：

  • android2.3（本人自测）；
  • itouch4（本人自测）；
  • ipad（dustin测试）；
  • 帮忙测试的哥们可以在我的博客留言反馈结果

暂时发现的问题

  • ipad/itouch有渲染问题，第一次拖动有闪屏现象

其他基于webkit的浏览器也能看到大概的效果

更多内容 →

手机网站在线播放解决方案

发表于 作者
回复

前言

web站点在线播放大部分是通过flash播放器播放流媒体，或者使用自己的插件如pps，快播等。手机是不支持flash流媒体播放的，即使使用flash lite也不能实现在线播放，那怎么样才能达到在线播放的效果呢？

解决方案

web站点可以使用播放器插件，手机也可以调用播放器插件啊。有实力的公司一般会自己开发播放器插件，如3G.cn，ucweb等。简单的wap或者mobile web应用可以使用他们开发好的播放器播放我们自己视频。

更多内容 →

移动Web前端开发——开发语言和手机浏览器

发表于 作者
3

WAP：无线应用协议，是在无线网络环境中应用层通讯的一个开放国际标准，主要用于手机等移动设备访问国际互联网。而WAP网站则是使用WML编写的网站的俗称。

移动web：是指可以用移动设备访问的WWW内容、应用和服务。

很明显，移动web应该包含了WAP。所以，我把能用移动设备访问的网站或应用称为移动web。

移动web是客户端技术，如果要开发移动网站，自然我们需要选择一款合适的标准语言。主要技术标准有：

  1. WML——古典的移动web标准，使用WML
  2. i-mode——小日本的标准，使用iHTML，我们可以忽略
  3. OMA领导的xHTML mobile profile，使用xHTML
  4. W3C领导的xHTML Basic，使用xHTML
  5. 以及所谓的Full Web，也就是普通的HTML——从iPhone开始流行起来

更多内容 →