移动平台开发须要的记录

     我以前在大学的时候一直都是学校PC端的前端开发，如今工做了，还在试用期，导师给了我些练习，此次的练习是页面在ipad上的展现，趁着这个时候，我以为要好好记录一下此次累积的经验。

　　1. 要求之一是使用iscroll模拟。

　　　可是iscroll是什么啊？为此我去google了一番。看了一些入门级的文章，大概了解了iscroll的用法。

　　　网上有一大堆用法的介绍：http://www.nb88.net/Index/p/id/406  等等。

　　　其实在移动平台上我没有碰到过对于滚动的问题，这个iscroll是解决移动端的滚动问题，我以为须要在应用中再好好体验一下。

 

　　2. 移动平台的meta标签。

　　　这个meta在移动平台上有很是神奇的地方。

　　　2.1 <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

　　　　这一句可让咱们用全屏来布局咱们的页面了，不用再担忧页面显示被浏览器缩小。

　　　　viewport便可视区域，对于桌面浏览器而言，viewport指的就是除去全部工具栏、状态栏、滚动条等等以后用于看网页的区域。对于传统WEB页面来讲，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上咱们的webapp在竖屏下一般宽度都是320，这时咱们320页面在iphone上显示成啥效果呢？有人可能认为iPhone不是320的宽度吗，感受应该是满屏的吧，事实呢？屏幕被缩放了，变成在PC上显示的那样。

　　　　一些参数：

　　　　width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）
　　　　height: viewport 的高度 （范围从 223 到 10,000 ）
　　　　initial-scale: 初始的缩放比例 （范围从>0到 10 ）
　　　　minimum-scale: 容许用户缩放到的最小比例
　　　　maximum-scale: 容许用户缩放到的最大比例
　　　　user-scalable: 用户是否能够手动缩放

        2.2 <meta name=”format-detection” content=”telephone=no” />

　　　　你明明写的一串数字没加连接样式，而iPhone会自动把你这个文字加连接样式、而且点击这个数字还会自动拨号！想去掉这个拨号连接该如何操做呢？这时咱们的meta又该大显神通了，代码以下：

           telephone=no就禁止了把数字转化为拨号连接！
　　　　telephone=yes就开启了把数字转化为拨号连接，要开启转化功能，这个meta就不用写了,在默认是状况下就是开启！

        2.3 <meta name=”apple-mobile-web-app-capable” content=”yes” />

　　　　这meta的做用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当咱们须要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

        2.4 <meta name=”apple-mobile-web-app-status-bar-style” content=”black|default|black-translucent” />

　　　　做用是控制状态栏显示样式。