手機網站開發的經驗總結

時間 2019-11-13

原文原文鏈接

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

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(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.瀏覽器緩存。若是再更新不快的狀況下，最好開啓瀏覽器緩存