Web app 开发入门(基础知识篇)

基础知识篇：

1. viewport:

按字面意思就是可视窗口。对于PC浏览器，我们很清楚viewport是什么，就是除去了所有工具栏、状态栏、滚动条等等之后，可见网页的部分，这才是真正有效的窗口。由于移动设备屏幕的宽度不同于传统web，因此需要修改viewport的相关属性。

实际上我们可以操作的属性有以下几个个：

width -             //  viewport 的宽度 （范围从200 到10,000，默认为980 像素）

height -            //  viewport 的高度 （范围从223 到10,000）

initial-scale -     //  初始的缩放比例 （范围从>0 到10）

minimum-scale -    //   允许用户缩放到的最小比例

maximum-scale -    //   允许用户缩放到的最大比例
user-scalable -    //   用户是否可以手动缩 (no,yes)

meta？

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

   <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

设置meta，可以让浏览器根据手机尺寸的大小来调整viewport的大小。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //编码
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
<meta name=”apple-mobile-web-app-capable” content=”yes” />  // 离线应用的另一个技巧     
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />  // 隐藏状态栏        
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式        
<meta content="telephone=no" name="format-detection" />       //告诉设备忽略将页面中的数字识别为电话号码      
<meta name="Author" contect="Mr.He"/ >