viewport

前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端的软件。比如你要写文档，一般会打开Office 2013之类的本地软件；但是你也可以选择在浏览器里输入一个网址，再比如用桌面客户端来收发邮件，但你也可以直接用浏览器登陆gmail亦或者QQ邮箱，直接把这个当客户端用。总之就是使用网页版代替本地软件。 Mobile Web App 当然就是指在手机端打开的Web App。 移动客户端的开发类型 Native App（原生APP），也就是完全使用移动设备系统语言写的客户端，iPhone iPad就是纯Object-C，安卓就是纯JAVA, 就是用户看到的界面,体验到的交互都是原生的。这是性能最棒的开发方式，但灵活性就没下面的好。 Web App, 这个就是在移动浏览器里打开的，纯HTML+CSS+JS，说白了就是个网页，只不过非常的富应用，就是在浏览器里打开的页面。。IOS支持可以在桌面创建访问的快捷方式，但是说到底还是打开Safari跑。。而且对设备硬件的接口什么的挺薄弱。 Hybrid App.[HTML5 in mobile devices] 这个还是第一次看到这个概念

前言 在移动前端第一弹：viewport详解中，我们讲了viewport，那是一个关于meta的故事。这次我们会就将meta这个故事讲得更广阔、更有意思一些。 写过HTML的童鞋，应该都对这个不陌生，或用它来定义页面编码，或用它来定义搜索引擎抓取方式，或用它定义页面关键字，描述等等。 meta列表 好的meta使用，能更好地提高页面的可用性及被检索的几率。 这里并不会列出所有的meta使用方式，只挑选一些常用及实际意义比较大的讲讲，当然也包括一些厂商私有定制的。 常规 声明文档使用的字符编码 <meta charset="utf-8" /> 该声明用来指定文档的编码，除了utf-8，可选值还有：ISO-8859-1、BIG5、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等 当然，你可能还见过使用另外一种方式来定义文档字符编码： <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 相对于这种方式，更推荐你使用第1种，言外之意，就是推荐使用HTML5。 声明页面刷新或跳转 <meta http-equiv="refresh" content="10" /> <meta http-equiv="refresh" content="10; url=http:/

前言 这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。 你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。 但其实它一点也不新奇，不复杂。 viewport简介 没错，就是viewport特性，一个移动专属的Meta值，用于定义视口的各种行为。 该特性最先由Apple引入，用于解决移动端的页面展示问题，后续被越来越多的厂商跟进。 举个简单的例子来讲为什么会需要它： 我们知道用户大规模使用手机等移动设备来进行网页浏览器，其实得益于智能手持设备的兴起，也就是近几年的事。（还记得不久前的几年，满大街都还是诺基亚的天下么？） 这时有一个很现实的问题摆在了厂商面前，用户并不能很好地通过手机等设备访问网页，因为屏幕太小。 layout viewport Apple也发现了这个问题，并且适时的出现，它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签，用来创建一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px（其他厂商各有不同①）。 这就很好的解决了早期的页面在手机上显示的问题，由于两者之间的宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构不会被破坏。 ①的描述大致如下，数值不一定持续准确，厂商可能更改