Bootstrap学习笔记

Bootstrap从3.0版本开始全面支持移动平台，Mobile First的原则。

以下内容基本来自：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html

1.下面的meta标签的意思是默认情况下，UI布局的宽度和移动设备的宽的一致，缩放大小为原始大小.

如果不希望用户单击屏幕放大浏览，可以在 content中加入user-scalable="no",这样就禁用了缩放功能，用户只能滚动屏幕了，这样会使网站看上去更像原生应用。当然，这个应该视情况而定

<meta name="viewport" content="width=device-width, initial-scale=1">

 

最近在搞web app开发，所以呢，移动端的页面布局就显得很重要啦。

2.下面的meta标签表示的意思是是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。

就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。

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

2.1图标是根据link标签来定义的，通过设置相应apple-touch-icon标签，则添加到主屏上的图标就会使用我们指定的图片。

默认iphone的大小为60px，ipad为76px，retina屏乘以2倍。

     当定义了多个关于apple-touch-icon的link标签的时候，按照以下的规则来定义优先级

• 如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
• 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
• 如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

2.2apple-mobile-web-app-capable设置为yes，可以用WebApp设置一个类似NativeApp的启动画面

<link rel="apple-touch-startup-image" href="/startup.png">

2.3apple-mobile-web-app-capable不支持sizes属性，所以使用media来控制retina和横竖屏加载不同的启动画面。

// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

// iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

// iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

3.下面的meta表示的是当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

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

4.下面的meta表示的是忽略页面中的数字识别为电话号码，这样就禁止了把数字转化为拨号链接

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

5.下面的meta表示的是忽略页面中的email识别

<meta name="format-detection" content="email=no" />