溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2021-10-14 14:17:34 來源：億速云 閱讀：111 作者：小新 欄目：移動(dòng)開發(fā)

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

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

1.頁面的適用性問題：

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

代碼如下:


<meta name="viewport" content="width=device-width"/>

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

2.版本制作問題：

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

3.版本控制問題：

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

如果你僅僅想開發(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ī)版本的大小問題：

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

5.瀏覽器緩存：

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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

web
AI
助
手