手机web页面开发-第一弹

毕业设计题目《基于three.js的太阳系全景漫游》，项目开发运行在手机端，开始学习手机端页面开发。

新建index.html，写meta标签。meta标签分为两大部分：http标题信息（http-equiv）和页面描述信息。

1、http-equiv属性的content-type值（显示字符集的设定）

　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

　　该标签定义了html页面所使用的的字符集，浏览器会根据此来调用相应的字符来展示页面。这条标签定义了页面使用的字符集为utf-8，它可以在同一页面显示中文简体、繁体以及其他语言（如日文、韩文）等。


2、name属性的viewport值（移动屏幕的缩放）

viewport：手机浏览器渲染页面时来，会将页面放在一个“虚拟”的窗口下，这个“虚拟”窗口就是viewport。通常“虚拟”的窗口比屏幕宽，用户可以通过平移和缩放查看页面的不同部分。移动版的safari浏览器引进了viewport这个meta标签，让网页开发者来控制viewport的大小和缩放，其他手机浏览器也能支持 。

　　viewport并非只是ios上的独有属性，在Android、wp上同样也有viewport。它们解决的问题是一样的，即无视设备真实的设备真实分辨率，直接通过dpi{一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）}，在物理尺寸和浏览器之间重设分辨率，这个分辨率和设备的分辨率无关。比如说网站宽800px，设置width=800，来让网站在不同尺寸大小的设备上都刚好满屏显示网站。

一个viewport meta标签内容大致如下：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

width：控制viewport的大小，可以设定为确切的像素数，如width=600，或者设定为特殊的值，如width=device-width来指代比例为100%屏幕宽度时css的像素值。（相应由height及device-height属性，可能对包含基于viewport高度调整大小以及位置的元素的页面有用。）

initial-scale：控制页面初次加载时的缩放等级。

maximum-scale、minimum-scale以及user-scalable控制允许用户以怎样的方式放大或缩小页面。

maximum-scale：允许用户缩放的最大比例；mimimun-scale：允许用户缩放到的最小比例；user-scalable：用户是否可以手动缩放。

minimal-ui：在IOS 7.1的Safari新增“minimal-ui”可以让网页在加载时就隐藏了顶部地址栏和底部的导航栏。在IOS 8中就移除了该属性，因为一个原则：页面内容不应该能够控制系统的UI。

　　即上面代码的意思是让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。即故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率一样，不做任何缩放，因此网站图片更显细腻，不会失真。类比将1000*1000的图片缩放至500*500。

3、name属性的format-detection值（是否将网页内容中的手机号码显示为拨号超链接）

　　<meta name="format-detection" content="telephone=no">

　　a.使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch点击数字为存入联系人，iPhone为呼叫电话），忽略将页面中的数字识别为电话号码。

4、name属性的apple-mobile-web-app-capable值（网站开启对web app程序的支持）

　　<meta name="apple-mobile-web-app-capable" content="yes">

　　设置为yes，网页就会在满屏模式的时候删除默认的苹果工具栏和菜单栏。

5、name属性的apple-mobile-web-app-status-bar-style值（改变顶部状态栏的颜色）

<meta name="apple-mobile-web-app-bar-style" content="black">

　　默认值为default（白色），可以定为black以及black-translucent（灰色半透明），若为灰色半透明，将会占据页面位置，浮在页面上方。

唔，写页面结构