关于开发手机网站的一些总结

所属分类: 网页制作 / 应用技巧 阅读数: 238
收藏 0 赞 0 分享

手机版网站起码要实现一些基本的功能吧:

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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(emptyempty($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.浏览器缓存:

如果再更新不快的情况下,最好开启浏览器缓存。

更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多