Div Css

wap手机网页排版技术

来源:博客转载 2016-12-22 17:22:541257

2G时代,手机网页只能出现文字列表和微小缩略图片,wap网页

WAP其实就是一个小互联网,互联网能实现的功能,在手机WAP上一样能够实现,如:开通企业手机wap网站

3G时代开始,HTML5的手机网页,支持视频,图片,音乐动画特效的手机网站,3g网页

4G时代,出现更复杂的手机商城网页,APP时代

app分平台语言和封装技术的分支。

手机android,IOS,ISO

android谷歌公司利用java语言为底层开发的手机操作系统。

开发手机应用必须采用java语言,java语言有版权费


IOS苹果公司开发操作系统,swift开发语言。

开发手机应用必须采用swift语言,不开源。

winWindows 10 Mobile 微软开发手机平台

2015年开始,所有的国际大互联网企业参与w3c组织主导的html5协议标准,主要目的是抛弃flash,甲骨文公司收购。

 

什么是APP。APP其实就是电脑端的客户端概念,比如在你手机桌面上看到的图片就是一个APP的快捷键,既然有客户端的概念,它属于C/S架构。APP实际就是手机客户端一个应用要内容更新肯定要有服务端,所以APP开发,我们默认情况下说的客户端开发,而服务器是附带的必要部分。


产生一个历史问题:分为3种封装APP的方法。

Native APP 原生APP:

Native App,原生APP,使用原生(即Android或iOS)开发的APP。两年多以前这非常流行,到现在为止,原生开发人员数量众多,一抓一大票,技术成熟,好多培训机构都抱着老掉牙的API翻来覆去的讲——尤其是Android。Sorry,说错话了……使用原生开发有其优势:应用的性能好,适配起来相对容易。学习成本要看人,个人觉得技术点不多,门槛相对稍高,但入门后学习起来就很轻松——网络资料实在是太多了。

但原生APP最头疼的有三个问题:

1、无法跨平台:Android和iOS都需要开发各自平台的版本——开发成本高;

2、升级麻烦:每次升级都要下载安装包,Android还好,反正不需要审核,下载就下载吧,但iOS就麻烦了,发布每个版本还得经过App Store的审核,这导致第三个问题;

3、Android和iOS很难同步发布。

开发android的APP只能在android系统运行

开发IOS的APP只能在苹果系统运行。

android还好,但IOS从技术角度是阻碍技术发展。


Web App

所谓的Web App,就是把手机当做一个浏览器(Android使用WebView,iOS使用UIWebView),做几个页面挂在服务器端,类似于一个小网站。这样说虽然不太贴切,但实际上给人的感觉就是这样的。虽然开发成本大大降低,但页面访问速度慢、操作体验差。于是第三种模式诞生了。

严格来讲:web APP不属于APP的范畴,因为它是B/S架构。你只要在手机浏览器类似输入网址的方式打开一个域名,那么webAPP内容全部由远程服务器下载给手机浏览器,就呈现给客户了。所以他不属于APP范围。

产生一个伪装手机APP应用。可以在APP客户端内部绑定一个域名,APP客户端内什么代码都没有,只有一个域名地址,然后也可以安装到手机桌面,打开app实际就是访问远程服务器的内容,这样的APP才是互联网所说的WEB APP。

用浏览器打开的叫 3G html5网站。

欺骗:外行人不知道其中原理,如果webAPP是不能上架到手机商城提供下载。因为手机商城要审核你的APP客户端权限,其中木马病毒检测,和应用内容检测,但你的APP里面只有一个超链接,所以商城不能确认你的APP以后的内容展现情况,所以默认都不会通过审核

 

   Web App没啥差别,但涉及到的技术成本、开发成本、学习成本比Web App高,它综合了Web App的开发速度和Native App的高性能体验

混合型APP,是跨平台的APP应用开发,2015年开始,安卓java甲骨文公司版权过高,不利于android开源发展,2015互联网大会通过以w3c组织发起的html5为跨平台应用语言以后,所有平台逐步正在采用底层支持html5 api调用原生硬件驱动。

随着厂家的假如HTML5app将占领整个市场。体验效果大大加强。

 

HTML5在webapp已经采用了,但属于网页的范畴,所以它的客户端是手机中的浏览器。所以它的权限很低,不能调用优化手机网页体验。

那么Hybrid App  HTML5的作用是什么?

Hybrid App HTML5是用在手机app客户端,没有浏览器做为客户端,所以实际是完全跟原生一样,可以调用所有硬件api,GPS,摄像头,相册,硬件加速,推动。

web app其实就是手机网站,顶多是加了个APP客户端的外壳。

排版技术大概分为两大类:

1,独立排版手机网页,通过后端程序判断浏览器user-agent输出不同手机模板给用户。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2、自适应排版:

自适应排版不关心浏览器的user-agent,它关心的是浏览器的可视大小,当浏览器小于多少像素时,重新利用CSS定位自动排版网页布局,其中核心技术就是CSS3的媒体查询。

@media

 

浏览器的身份识别:user-agent

开发工具Hbuilder

http://www.dcloud.io/

文章推荐