app开发笔记

app开发要点

一、页面head头部的meta声明

针对移动设备的特性,在head标签内需要添加一些特殊的声明。

<meta name='HandheldFriendly'  content='True'/>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"/>

1、viewport

  • viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域
  • width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
  • height: viewport 的高度 (范围从 223 到 10,000 )
  • initial-scale: 初始的缩放比例 (范围从>0到 10 )
  • minimum-scale: 允许用户缩放到的最小比例
  • maximum-scale: 允许用户缩放到的最大比例
  • user-scalable: 用户是否可以手动缩放
  • 通常不使用 height 属性, 如果要将元素放置在屏幕底部或依赖于视区高度的位置,才可能使用该属性。虽然viewport meta 标记现在很常见,但在过去,某些浏览器使用其他 meta 标记(如 HandheldFriendly 和 MobileOptimized)来实现相同的目的。
    所以为了使position:fixed代码在android2.3 、2.2系统的浏览器中有效,增加了如下代码:
<meta name="HandheldFriendly" content="true" />

下面两篇文章,讲到了 HandheldFriendly ,供参考:
http://msdn.microsoft.com/zh-cn/magazine/jj133814.aspx
http://www.dotblogs.com.tw/pou/archive/2010/09/26/17890.aspx

2、apple-mobile-web-app-capable当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari

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

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
想达到全屏显示的效果必须先通过Safari将网页添加到主屏,再通过主屏的图标打开网站,直接在Safari输入URL是不行的。
关于主屏图标、启动画片的设置,可参考: http://www.iinterest.net/2011/01/03/mobile-webapp-base/

3、apple-mobile-web-app-status-bar-style

作用是控制状态栏显示样式,三种方式:

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

4、format-detection

即使你写的一串数字没加链接样式,iPhone也会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:
telephone=no就禁止了把数字转化为拨号链接!
telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

忽略将页面中的数字识别为电话号码

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

5、忽略Android平台中对邮箱地址的识别

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

6、viewport模板——通用


<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content=&#

你可能感兴趣的:(html5,app,移动设备)