碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2012-03-02 16:05   4382    移動設備


1.頁面的適用性問題。對於移動終端，有不一樣的分辨率與屏幕尺寸，如果還像電腦端的設計還限制網頁的寬度為1003px或其他像素值，字體大小還用12px或14px，那么，不一樣的終端的效果差別會很大。所以這里，最好讓網頁的寬度自適應屏幕，還好，w3c在設計html的時候為我們考慮了這一點，只需一句話，就可以搞定，就是加上

Javascript代碼 
  1. <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的支持，代碼如下 

Javascript代碼 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <meta name="viewport" content="width=device-width"/>  
  7. <title>版本控制</title>  
  8. <script type="text/javascript">  
  9. window.onload = function(){  
  10.   //檢測是否支持js  
  11.   try{//檢測是否支持html5  
  12.     document.getElementById("c").getContext("2d");  
  13.     document.location = '支持html5版的鏈接';  
  14.   }catch(e){//否則跳到支持js版  
  15.     document.location = '支持js版';  
  16.   }  
  17. };  
  18. </script>  
  19. </head>  
  20.   
  21. <body>  
  22. <canvas id='c'></canvas>  
  23. 普通版  
  24. </body>  
  25. </html>  


如果你僅僅想開發一個版本，只是判斷一下是不是移動客戶端，這里引用一段discuz! x2的代碼 

Php代碼 
  1. <?php  
  2. function checkmobile() {  
  3.     global $_G;  
  4.     $mobile = array();  
  5.     static $mobilebrowser_list =array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini',  
  6.                 'ucweb', 'windows ce', 'symbian', 'series', 'webos', 'sony', 'blackberry', 'dopod', 'nokia', 'samsung',  
  7.                 'palmsource', 'xda', 'pieplus', 'meizu', 'midp', 'cldc', 'motorola', 'foma', 'docomo', 'up.browser',  
  8.                 'up.link', 'blazer', 'helio', 'hosin', 'huawei', 'novarra', 'coolpad', 'webos', 'techfaith', 'palmsource',  
  9.                 'alcatel', 'amoi', 'ktouch', 'nexian', 'ericsson', 'philips', 'sagem', 'wellcom', 'bunjalloo', 'maui', 'smartphone',  
  10.                 'iemobile', 'spice', 'bird', 'zte-', 'longcos', 'pantech', 'gionee', 'portalmmm', 'jig browser', 'hiptop',  
  11.                 'benq', 'haier', '^lct', '320x320', '240x320', '176x220');  
  12.     $useragent = strtolower($_SERVER['HTTP_USER_AGENT']);  
  13.     if(($v = dstrpos($useragent, $mobilebrowser_list, true))) {  
  14.         $_G['mobile'] = $v;  
  15.         return true;  
  16.     }  
  17.     $brower = array('mozilla', 'chrome', 'safari', 'opera', 'm3gate', 'winwap', 'openwave', 'myop');  
  18.     if(dstrpos($useragent, $brower)) return false;  
  19.   
  20.     $_G['mobile'] = 'unknown';  
  21.     if($_GET['mobile'] === 'yes') {  
  22.         return true;  
  23.     } else {  
  24.         return false;  
  25.     }  
  26. }  
  27.   
  28. function dstrpos($string, &$arr, $returnvalue = false) {  
  29.     if(emptyempty($string)) return false;  
  30.     foreach((array)$arr as $v) {  
  31.         if(strpos($string, $v) !== false) {  
  32.             $return = $returnvalue ? $v : true;  
  33.             return $return;  
  34.         }  
  35.     }  
  36.     return false;  
  37. }  
  38. var_dump(checkmobile());//如果是移動端返回true，否則false  


4.手機版本的大小問題。一般來說，對於精簡版和普通版的手機網頁，我們是做得越精簡越好，能省的代碼最好省去，畢竟現在手機流量對用戶來說還是很寶貴的。比如元素命名，一般頁面少的話，命名越短越好，css最好寫在一行。css中，有些元素是繼承父類的樣式的，不用重復定義，善用默認值。 
5.瀏覽器緩存。如果再更新不快的情況下，最好開啟瀏覽器緩存


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML5實現手機QQ表情功能 實現手機訪問，自動跳轉網站手機版 網站建設中使用HTML5實現使用手機攝像頭拍照上傳的功能 利用HTML5的一個重要特性 —— DeviceOrientation來實現手機網站上的搖一搖功能 手機訪問網站自動跳轉到手機版 手機版網站頂部導航條的布局 手機訪問PC網站自動跳轉到手機版 微信開發之移動手機WEB頁面(HTML5)Javascript實現一鍵撥號及短信發送功能 html5手機網站需要加的那些meta標簽，手機網站自適應 HTML5 實現手機拍照上傳
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM