基础知识篇:
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"/ >