web app开发规范

整理自网络

"WAP网页设计" 和 "移动设备网页设计"

        wap网页叫法的由来起源于wap无线协议，这个协议是由WML语言描述Internet的内容，最后呈现在无线网络上（GSM,GPRS,CDMA）。

         以前设备的内存、计算能力、屏幕分辨率不足以支持HTML，所以产生了WML无线标记语言。

        现在的移动设备都可以支持HTML了，所以已经没有人再用WML组织WAP站点了，一般都是HTML+CSS。

        但是还有很多人管移动设备网页开发叫WAP开发。这种说法是错的。

    

        所以， WAP开发是另一种技术，使用WML无线标记语言，非常老旧，已经废弃。现在都叫web app

小屏幕移动设备开发原则

        针对于小屏幕移动设备的界面设计，在某些指定任务的界面，应优先于让用户关注当前任务，而不是应用程序本身。

手机浏览器内核

        Trident（微软，主要用在WP7系统内置浏览器）

        Presto（Opera，主要为Opera Mobile浏览器、OperaMini浏览器，速度最快，处理JS脚本最兼容）

        Webkit（Android原生浏览器、苹果safari、谷歌的Chrome android4.0都是使用webkit，速度快）

        Gecko（火狐的，消耗内存大）

        全球就这四个原生内核！它们能做pc的浏览器，也能做手机浏览器。

        国内都基于webkit开发，我们最主要关注的内核！

        UC的U3内核、QQ的X5内核、华为的T9内均基于Webkit！

        要关注你产品的群体用什么手机，想想这种手机用的内核。

        支持H5的程度是手机浏览器好坏的其一标准。

如何制作移动网站

        自适应网页设计，让同一个网页代码，能够在不同设备上都能有更好的浏览体验，这样，移动设备可以通过原网址浏览桌面站点，看到的却是自动适应屏幕大小后的网站。尽管这种方式使得域名统一了，但如果对于结构复杂的网站来说，代码设计具有相当高的难度。（自适应的网页使用的是同一个网址，不会出现重定向）

        移动网站是按照移动端的设计规则来重新建立一个移动网站，尽管内容和桌面网站一样（也可以与桌面网站不同），但却有两个不同的网址。通常的移动网站使用子域名的方式实现。桌面网站的网址检测到移动设备后自动重定向到移动网站页面。

如何将桌面网站修改成移动网站（自适应网站）

        1.在HTML头部增加viewport标签（控制显示尺寸、是否允许缩放、初始比例、上下限等）

        2.MobileOptimized标签（微软为IE Mobile版设置的定义宽度标记）

        3.HandeldFriendly标签（是否对手持设备友好，只有true或false）

        4.在css文件尾部增加针对不同屏幕分辨率的规则，布局使用相对宽度，隐藏侧栏（就是使用了媒体查询）

        经过以上四步，半小时的开发量就可以将一般的桌面网站变为自适应网站。

示例代码（医小护wap的head）

1.  

viewport定义手机视口

content=width=device-width   浏览器页面的宽度等于设备的宽度

initial-scale=1.0   初始的缩放比例

minium-scale=1.0   页面最小也要和设备的宽度一样（minium-scale=0.5是压缩至设备宽度的一半）

maximum-scale=1.0   页面最大放大也只能和设备一样宽度（maximum-scale=3是最多放大至设备宽度的3倍）

user-scalable=no   禁止用户缩放（这个html是微信中的，所以禁止了，一般不禁止）

另：content="initial-scale=2.0" 是将页面放大两倍。

    

         手机号码不被显示为拨号链接

    IOS设备对meta定义的私有属性：

    

          在web app应用下状态条（屏幕顶部条）的颜色，还可定义为black-translucent(灰色半透明)

   

          网站开启对web app程序的支持

    2、3、4例子参考下面那道问题

在移动网站中需要添加哪几个Meta标签？

        viewport，几乎已经是公认的标准了，最初是由苹果公司创建，用于iphone上面的safari

                例子：

        

        HandheldFriendly，这个标签和下面介绍的MobileOptimized是功能机时代的事实上标签，它用来标示移动站点。

                例子：

        MobileOptimized，这是windows专有的meta标签，识别移动内容的一种方法，缺点是需要给出特定的宽

                例子：

        HandheldFriendly和MobileOptimized这两个标签的支持情况未知，但是viewport是必须的！