如何開(kāi)發(fā)web手機(jī)網(wǎng)站

這篇文章主要介紹了如何開(kāi)發(fā)web手機(jī)網(wǎng)站，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是一家企業(yè)級(jí)云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營(yíng)經(jīng)驗(yàn)。主營(yíng)GPU顯卡服務(wù)器，站群服務(wù)器，成都西信服務(wù)器托管，海外高防服務(wù)器，成都機(jī)柜租用，動(dòng)態(tài)撥號(hào)VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。

手機(jī)版網(wǎng)站起碼要實(shí)現(xiàn)一些基本的功能吧：

1.頁(yè)面的適用性問(wèn)題：

對(duì)于移動(dòng)終端，有不一樣的分辨率與屏幕尺寸，如果還像電腦端的設(shè)計(jì)還限制網(wǎng)頁(yè)的寬度為1003px或其他像素值，字體大小還用12px或14px，那么，不一樣的終端的效果差別會(huì)很大。所以這里，最好讓網(wǎng)頁(yè)的寬度自適應(yīng)屏幕，還好，w3c在設(shè)計(jì)html的時(shí)候?yàn)槲覀兛紤]了這一點(diǎn)，只需一句話，就可以搞定，就是加上

代碼如下:

，對(duì)于字體的話，我們就用em或ex為單位就好。

2.版本制作問(wèn)題：

移動(dòng)頁(yè)面往往針對(duì)不同的手機(jī)設(shè)置不同的版本，一般有精簡(jiǎn)版，標(biāo)準(zhǔn)版，3G版，觸屏版，智能手機(jī)版等等，這些除了在頁(yè)面設(shè)計(jì)上有不同外，頁(yè)面語(yǔ)言也會(huì)不同的。精簡(jiǎn)版采用wap 1.0 的wml腳本編寫(xiě)，這個(gè)通用性以前很強(qiáng)，很多國(guó)產(chǎn)手機(jī)都支持這個(gè)語(yǔ)言的，但這個(gè)語(yǔ)言是很精簡(jiǎn)的。標(biāo)準(zhǔn)版的一般可以采用wap 2.0技術(shù)，對(duì)應(yīng)的腳本語(yǔ)言是xhtml mp(xhtml mobile profile)，這個(gè)語(yǔ)言是xhtml的子集，這個(gè)并且支持大部分的css,基本上和電腦版的差不多，但一般不能用js，這是考慮到這些手機(jī)是不支持js的。對(duì)于智能手機(jī)版，由于現(xiàn)在的智能手機(jī)都支持js，這個(gè)版本的制作上就簡(jiǎn)單多了，不過(guò)，又由于大部分智能手機(jī)（基本上除去塞班手機(jī)，包括Android，ios，wp7等）都支持Html5，因此，智能手版可以采用html5來(lái)制作。

3.版本控制問(wèn)題：

可能這部分是比較不好解決的，怎么智能判斷手機(jī)的最佳版本并跳轉(zhuǎn)，可以從這幾個(gè)方面考慮。一方面，可以想辦法得到手機(jī)的操作系統(tǒng)，比如，Android的，ios的，就可以跳轉(zhuǎn)到html5版了，windows系統(tǒng)，毫無(wú)疑問(wèn)電腦版，獲得手機(jī)系統(tǒng)，可能通過(guò)得到手機(jī)型號(hào)，現(xiàn)在的方法是通過(guò)瀏覽器的UA（user agent)，獲得手機(jī)的一些信息，簡(jiǎn)單一點(diǎn)的，直接可以通過(guò)UA判斷手機(jī)的制造產(chǎn)商。要想獲得更多的信息，就得有一個(gè)數(shù)據(jù)庫(kù)，因?yàn)椴煌謾C(jī)型號(hào)會(huì)有不一樣的UA信息，世界上的手機(jī)有很多，自己要想做一個(gè)這樣的數(shù)據(jù)庫(kù)還是很難的，不過(guò)，已經(jīng)有人為我們做好了這樣的數(shù)據(jù)庫(kù)，或者更方便的，做好了一個(gè)識(shí)別手機(jī)適用最佳版本的函數(shù)庫(kù)，這里我推薦用Wurfl。另一方面，可以通過(guò)頁(yè)面的腳本來(lái)判斷瀏覽器對(duì)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(){
//檢測(cè)是否支持js
try{//檢測(cè)是否支持html5
document.getElementById("c").getContext("2d");
document.location = '支持html5版的鏈接';
}catch(e){//否則跳到支持js版
document.location = '支持js版';
}
};
</script>
</head>
<body>
<canvas id='c'></canvas>
普通版
</body>
</html>

如果你僅僅想開(kāi)發(fā)一個(gè)版本，只是判斷一下是不是移動(dòng)客戶端，這里引用一段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());//如果是移動(dòng)端返回true，否則false
?>

4.手機(jī)版本的大小問(wèn)題：

一般來(lái)說(shuō)，對(duì)于精簡(jiǎn)版和普通版的手機(jī)網(wǎng)頁(yè)，我們是做得越精簡(jiǎn)越好，能省的代碼最好省去，畢竟現(xiàn)在手機(jī)流量對(duì)用戶來(lái)說(shuō)還是很寶貴的。比如元素命名，一般頁(yè)面少的話，命名越短越好，css最好寫(xiě)在一行。css中，有些元素是繼承父類(lèi)的樣式的，不用重復(fù)定義，善用默認(rèn)值。

5.瀏覽器緩存：

如果再更新不快的情況下，最好開(kāi)啟瀏覽器緩存。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何開(kāi)發(fā)web手機(jī)網(wǎng)站”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章標(biāo)題：如何開(kāi)發(fā)web手機(jī)網(wǎng)站
URL分享：http://muchs.cn/article0/jooeoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、域名注冊(cè)、品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容