欢迎来到 jackNEss'窝窝
I like simple mind

手机前端开发经验分享——android、ios篇(HTML部分)

2012年07月03日

手机前端开发经验分享——android、ios篇(HTML部分)

针对高端智能手机开发的站点,其实用的是各种HTML5的技术,我在这里给大家分享一下在手机上前端开发中要注意的地方细节。

下面与大家分享下HTML部分的一些经验。

HTML部分

HTML部分在手机项目中用得及其多的就是 媒体查询 和 meta 中的 viewport 属性了,下面来重点讲一下这2个标签的使用方法

<meta name=”viewport” />

在这里我就直接贴上我项目中 viewport 上的写法,来进行讲解吧。

<!-- html document -->
<meta content="width=device-width, target-densitydpi=device-dpi; initial-scale=1.0,maximum-scale=1.0,user-scalable=no;" name="viewport" />

viewport 语法介绍:

<!-- html document -->
<meta name="viewport"
	content="
		height = [pixel_value | device-height] ,
		width = [pixel_value | device-width ] ,
		initial-scale = float_value ,
		minimum-scale = float_value ,
		maximum-scale = float_value ,
		user-scalable = [yes | no] ,
		target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
	" 
/>
width

控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height

和 width 相对应,指定高度。

target-densitydpi

一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

  • device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
  • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
  • low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
  • <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
<!-- html document -->
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-densitydpi=low-dpi" />
<meta name="viewport" content="target-densitydpi=200" />

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。

initial-scale

初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

maximum-scale

最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。

user-scalable

用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

更详细的介绍可以看这里 http://developer.android.com/guide/webapps/targeting.html#ViewportDensity

媒体查询 <link media />

媒体查询可以让手机在不同分辨率下使用不同的样式表,使我们手机站点在不同的分辨率下都保持良好的阅读性和外观。

下面就说一下 在项目中 媒体查询的运用。

首先我们要定一个 总体的样式表

<!-- html document -->
<link rel="stylesheet" href="http://s1.56img.com/style/3g/smart/v1/css/touch.v.1.css" />

然后就使用媒体查询,让不同分辨率下的 手机 自动配对相应的样式表(本项目一共定制了3套分辨率下的样式表)

<!-- html document -->
<link media="all and (min-width:320px) and (max-width:479px)"  rel="stylesheet" href="http://s1.56img.com/style/3g/smart/v1/css/touch.v.1.w320.css" />
<link media="all and (min-width:480px) and (max-width:639px)"  rel="stylesheet" href="http://s1.56img.com/style/3g/smart/v1/css/touch.v.1.w480.css" />
<link media="all and (min-width:640px)"  rel="stylesheet" href="http://s1.56img.com/style/3g/smart/v1/css/touch.v.1.w640.css" />

这里有更详细的说明介绍,我这里就不啰嗦了 http://www.qianduan.net/media-type-and-media-query.html

其他

除了以上我介绍的2个最最最常用的属性之外,我们在手机站点开发中用到的还有以下几个。

手机专用的 DTD 文档类型定义

手机网站专用的 DTD 文档类型定义,有了这个 那么手机访问我们战队就不会 把初始分辨率变为 与访问 web版网站的分辨率一样(即1024px)

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...

不过实际应用的时候发现,其实加上 viewport 的 width=”device-width”之后,那初始分辨率就不会是 1024 的了,DTD 的话 直接用 HTML5 的 DTD 也是 ok 的,即:

<!DOCTYPE html>
<html lang="zh-CN" >
..

meta 的其他属性

除了以上说到的,iphone给 meta标签扩展了几个 iphone专用的属性,还有一些针对手机的 meta属性,在这里也简单介绍一下。

<meta name=”apple-mobile-web-app-capable” />

当你网页中添加 apple-mobile-web-app-capable 后,在桌面图标进入网站时页面的a 连接只支持ajax

<!-- html document -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name=”apple-mobile-web-app-status-bar-style” />

这个用于定义是否显示 iphone 状态栏

<!-- html document -->
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />
<meta name=”format-detection” />

这个用于告诉设备忽略将页面中的数字识别为电话号码。

<!-- html document -->
<meta content="telephone=no" name="format-detection" />
分类HTML + CSS
阅读 1,013
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS