手机网页开发问题集锦

前言

接到一个小活,开发手机网页。对方给了一个psd设计图,让我做个手机网页,设计图很长,要求上拉动态加载。我想了想,本以为自己切个图处理一下就好,后来发现不行,许多问题。这里特地记录一下,有些还没解决,只是给了一下自己的想法。

皓眸大前端开发学习

转载请注明出处:http://www.haomou.net/2014/08/23/2014_web_question/

Doctype声明

有时可能您并没有注意,在编写html页面时候,有个关于<!DOCTYPE> 声明。HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
在HTML5中,简化了这一块,比html4简化了很多。不同格式的html声明如下:
HTML5:

1
<!DOCTYPE html>

HTML 4.01 Strict:
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

详情可以参考: http://www.w3school.com.cn/tags/tag_doctype.asp
这里主要说一个问题:添加这个声明<!DOCTYPE html>以后,浏览器会自动给一些元素添加默认样式。比如table会默认添加如下样式:(浏览器会标识 user agent)

1
2
3
4
5
table{
border-collapse:separate;
border-spacing:2px;
border-color:grey;
}

据说这个样式的优先级比较低,可以覆盖。但是我搞了半天也没弄好,原本整齐的页面变得一行一行的,中间有间隔。这个去掉<!DOCTYPE html>即可解决。

关于切图

拿到网页的psd设计图,最简便的方法就是切图了。photoshop会自动帮你切图,并生成html和图片切图文件夹。这里切图是需要一定的技巧的。首先,为了方便屏幕适配,方便排版,尽量采用横向切分。这样切出来的效果,就是每个tr就是整行,方便做width的适配,和纵向的分步加载。特别时候比较长的页面。
切分好图片之后,生成的html是采用table排版的。
这个table排版也是有讲究的,一般简单的横向切分,可以采用ps生成的,但是纵向切分的就不好控制了。所以建议采用横向切分,然后纵向自己做切分排版。否则整个页面的调试会是噩梦。采用的排版模式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
...
<table>
<tr><td>
<table>
<tr>
<td width="2px"></td>
<td> .... </td>
<td width="2px"></td>
<td> .... </td>
<td width="2px"></td>
</tr>
</table>
</td></tr>
<tr><td>
...
</td></tr>

这样排版的好处是没有指定宽度的td可以自适应宽度。然后,如果是图片,要做到图片大小自适应,加上一句神奇的css代码即可:

1
img{max-width:100%;width:auto;height:auto;}

加上这个,img会自动调整宽高,但是不会超过最大宽度。

图片展示插件

目前用的不错的幻灯片插件,个人感觉电脑网页用fancy box很不错,手机网页的用photo swipe,两者的使用方法基本相同。
具体使用方法,请参考官方示例。
皓眸大前端开发学习

手机端上下拉页面

在手机端对网页的操作比较灵活,用的最多的是下拉刷新,上拉加载,这样的动作。这里推荐一个插件iscroll,具体使用方法参考官方例子iScroll4 API。使用还是比较方便的,可以和jquery结合使用。

meta标签

首先编码用utf-8

1
2
3
<meta charset="UTF-8">   HTML5
或HTML4
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

然后设置视点viewpoint

1
2
3
4
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<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, email=no" />

viewport,

视图窗口,移动端特属的标签。一般使用下面这段代码即可:

1
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

上面的代码依次表示设置宽度为设备的宽度,默认不缩放,不允许用户缩放(即禁止缩放),在网页加载时隐藏地址栏与导航栏(ios7.1新增)。

1
2
3
4
5
6
7
width – // [pixel_value | device-width] viewport 的宽度,范围从 200 到 10,000,默认为 980 像素
height – // [pixel_value | device-height ] viewport 的高度,范围从 223 到 10,000
initial-scale – // float_value,初始的缩放比例 (范围从 > 0 到 10)
minimum-scale – // float_value,允许用户缩放到的最小比例
maximum-scale – // float_value,允许用户缩放到的最大比例
user-scalable – // [yes | no] 用户是否可以手动缩放
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度

注:target-densitydpi屏幕像素密度和缩放有关,你可以试试修改这个demo,用手机看下实际效果。我一般不设置这个属性。

apple-mobile-web-app-capable

是否启动webapp功能,会删除默认的苹果工具栏和菜单栏。

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

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

当启动webapp功能时,显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。这个主要是根据实际的页面设计的主体色为搭配来进行设置。

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

注:如果对apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解,可查阅下面的参考资料第三篇文章,里面有截图说明。

telephone & email

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

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

同样还有一个email识别

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

当然两者可以写在一起

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

其他meta

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

谢谢!

有问题请留言。T_T 皓眸大前端开发学习 T_T