DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 關於開發手機網站的一些總結
關於開發手機網站的一些總結
編輯:前端技巧     

手機版網站起碼要實現一些基本的功能吧:

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.浏覽器緩存:

如果再更新不快的情況下,最好開啟浏覽器緩存。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved