手机版网站起码要实现一些基本的功能吧:
1.页面的适用性问题。对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或14px,那么,不一样的终端的效果差别会很大。所以这里,最好让网页的宽度自适应屏幕,还好,w3c在设计html的时候为我们考虑了这一点,只需一句话,就可以搞定,就是加上
<
meta
name="viewport" content="width=device-width"/>
|
对于字体的话,我们就用em或ex为单位就好
2.版本制作问题。移动页面往往针对不同的手机设置不同的版本,一般有精简版,标准版,3G版,触屏版,智能手机版等等,这些除了在页面设计上有不同外,页面语言也会不同的。精简版采用wap 1.0 的wml脚本编写,这个通用性以前很强,很多国产手机都支持这个语言的,但这个语言是很精简的。标准版的一般可以采用wap 2.0技术,对应的脚本语言是xhtml mp(xhtml mobile profile),这个语言是xhtml的子集,这个并且支持大部分的css,基本上和电脑版的差不多,但一般不能用js,这是考虑到这些手机是不支持js的。对于智能手机版,由于现在的智能手机都支持js,这个版本的制作上就简单多了,不过,又由于大部分智能手机(基本上除去塞班手机,包括Android,ios,wp7等)都支持Html5,因此,智能手版可以采用html5来制作。
3.版本控制问题。可能这部分是比较不好解决的,怎么智能判断手机的最佳版本并跳转,可以从这几个方面考虑。一方面,可以想办法得到手机的操作系统,比如,Android的,ios的,就可以跳转到html5版了,windows系统,毫无疑问电脑版,获得手机系统,可能通过得到手机型号,现在的方法是通过浏览器的UA(user agent),获得手机的一些信息,简单一点的,直接可以通过UA判断手机的制造产商。要想获得更多的信息,就得有一个数据库,因为不同手机型号会有不一样的UA信息,世界上的手机有很多,自己要想做一个这样的数据库还是很难的,不过,已经有人为我们做好了这样的数据库,或者更方便的,做好了一个识别手机适用最佳版本的函数库,这里我推荐用Wurfl。另一方面,可以通过页面的脚本来判断浏览器对js和html5的支持,代码如下
<?
xml
version="1.0" encoding="UTF-8"?>
<!
DOCTYPE
html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<
head
>
<
meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
meta
name="viewport" content="width=device-width"/>
<
title
>版本控制</
title
>
<
script
type="text/javascript">
window.onload = function(){
//检测是否支持js
try{//检测是否支持html5
document.getElementById("c").getContext("2d");
document.location = '支持html5版的链接';
}catch(e){//否则跳到支持js版
document.location = '支持js版';
}
};
</
script
>
</
head
>
<
body
>
<
canvas
id='c'></
canvas
>
普通版
</
body
>
</
html
>
|
如果你仅仅想开发一个版本,只是判断一下是不是移动客户端,这里引用一段discuz! x2的代码
<?php
function
checkmobile() {
global
$_G
;
$mobile
=
array
();
static
$mobilebrowser_list
=
array
(
'iphone'
,
'android'
,
'phone'
,
'mobile'
,
'wap'
,
'netfront'
,
'java'
,
'opera mobi'
,
'opera mini'
,
'ucweb'
,
'windows ce'
,
'symbian'
,
'series'
,
'webos'
,
'sony'
,
'blackberry'
,
'dopod'
,
'nokia'
,
'samsung'
,
'palmsource'
,
'xda'
,
'pieplus'
,
'meizu'
,
'midp'
,
'cldc'
,
'motorola'
,
'foma'
,
'docomo'
,
'up.browser'
,
'up.link'
,
'blazer'
,
'helio'
,
'hosin'
,
'huawei'
,
'novarra'
,
'coolpad'
,
'webos'
,
'techfaith'
,
'palmsource'
,
'alcatel'
,
'amoi'
,
'ktouch'
,
'nexian'
,
'ericsson'
,
'philips'
,
'sagem'
,
'wellcom'
,
'bunjalloo'
,
'maui'
,
'smartphone'
,
'iemobile'
,
'spice'
,
'bird'
,
'zte-'
,
'longcos'
,
'pantech'
,
'gionee'
,
'portalmmm'
,
'jig browser'
,
'hiptop'
,
'benq'
,
'haier'
,
'^lct'
,
'320x320'
,
'240x320'
,
'176x220'
);
$useragent
=
strtolower
(
$_SERVER
[
'HTTP_USER_AGENT'
]);
if
((
$v
= dstrpos(
$useragent
,
$mobilebrowser_list
, true))) {
$_G
[
'mobile'
] =
$v
;
return
true;
}
$brower
=
array
(
'mozilla'
,
'chrome'
,
'safari'
,
'opera'
,
'm3gate'
,
'winwap'
,
'openwave'
,
'myop'
);
if
(dstrpos(
$useragent
,
$brower
))
return
false;
$_G
[
'mobile'
] =
'unknown'
;
if
(
$_GET
[
'mobile'
] ===
'yes'
) {
return
true;
}
else
{
return
false;
}
}
function
dstrpos(
$string
, &
$arr
,
$returnvalue
= false) {
if
(
empty
(
$string
))
return
false;
foreach
((
array
)
$arr
as
$v
) {
if
(
strpos
(
$string
,
$v
) !== false) {
$return
=
$returnvalue
?
$v
: true;
return
$return
;
}
}
return
false;
}
var_dump(checkmobile());
//如果是移动端返回true,否则false
|
4.手机版本的大小问题。一般来说,对于精简版和普通版的手机网页,我们是做得越精简越好,能省的代码最好省去,毕竟现在手机流量对用户来说还是很宝贵的。比如元素命名,一般页面少的话,命名越短越好,css最好写在一行。css中,有些元素是继承父类的样式的,不用重复定义,善用默认值。
5.浏览器缓存。如果再更新不快的情况下,最好开启浏览器缓存