web app开发规范

最新推荐文章于 2024-03-13 10:00:24 发布

原创最新推荐文章于 2024-03-13 10:00:24 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动设备 #网络 #web内核 #移动网站开发 #meta标签

移动设备web前端开发专栏收录该内容

3 篇文章

订阅专栏

整理自网络

"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. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

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" 是将页面放大两倍。