响应式Web,也称之为自适应Web;
当然就是可以根据客户端浏览设备的屏幕分辨率,自动调整排版的Web页面;

做了个简单的页面:
测试地址(请使用移动设备测试) http://www.54575.com/mobile/flexwrap/index.html

本人HTC G7手机截图(竖屏+横屏):

阅读全文 …

2012 年 7 月 13 日 吴成果, 吴技术

把自己的博客转换为手机版的,首先,先搞了一个叫WordPress Mobile Pack的插件;
用Opera Mobile Emulator模拟手机浏览器打开自己的博客,发觉的确变了:

但这并不是我想要的Web页面,于是修改手机模版~

这里非常要注意的一点是,必须在页面的头部<head></head>间,加入了这么一段代码:
<<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> 

Viewport的Meta标签有,有6个属性:
width – viewport的宽度
height – viewport的高度 (一般不做设置)
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放

然后就是Web标准化和CSS的修改了(熟练工了)……
边工作变修改,陆陆续续的,也就改完了,如图:


阅读全文 …

2012 年 7 月 13 日 吴成果, 吴技术

最近用手机浏览了下自己的Blog,突然觉得那个才叫一个2B啊;
作为一名有市场意式,有设计理念的码农,于是决定用2个星期时间,来小学习下移动终端Web开发;

首先,我先找出了下目前主流的显示终端的分辨率如下:

设备 分辨率
iPad 1024×768
iPhone 4 640×960
iPhone 3GS 320×480
HTC G7 480×800

最小的分辨率宽度是320;

本人的手机是HTC G7,用默认浏览器打开3G版新浪首页,是这样的:

阅读全文 …

2012 年 7 月 12 日 吴技术