原文網址:http://changyy.pixnet.net/blog/post/25137032-facebook-api-example---%E7%AC%AC%E4%B8%80%E6%AC%A1%E4%BD%BF%E7%94%A8%E3%80%81%E7%AF%84%E4%BE%8B%E5%92%8C%E6%95%99%E5%AD%B8%E7%AD%86

以下轉載原文

------------------------------------------------------------------------------------------------

沒想到要寫寫 Facebook API 啦!我原先以為是 Facebook 會提供一個工作站讓使用者上傳程式碼去運行,結果做這件事的還得自行找一台機器啦,但這樣也比較合情合理,畢竟電腦運算就是要耗 CPU 資源,就是要耗電。

之所以要紀錄這些,目的是給自己一個筆記,雖然官方的教學已經夠清楚,但沒有中文就是不友善啦。

  1. 首先,必須要有一個 Facebook 的帳號,在此就不多講,接著登入後,連結至 Facebook | 開發人員 ,並且點選 [Set Up New Application]
  2. 輸入應用程式的名稱,例如:Example,並且觀看條款後勾選同意。
  3. 系統會為你的應用程式產生獨一無二的資訊,如 Key 等,接著回到[我的應用程式]頁面,並且看到剛剛新增的"Example"資訊,最下方有個項目是[Sample Code],即可點選"example code"可觀看範例程式和簡單安裝的過程
    教學,此範例程式已經是可以運行的程式碼,並且已將應用程式的資訊(Key)也填寫上去了。
  4. 找一台可以用的工作站,必須支援 PHP 程式語言跟 Web Service
  5. 在Web Service 的自己目錄下(Ex:/home/ID/WWW,/home/ID/
    public_html),新增 facebook 相關程式
  6. 新增 index.php 並且加入資訊
    • <?php
      // Copyright 2007 Facebook Corp.  All Rights Reserved. 
      // 
      // Application: Example
      // File: 'index.php' 
      //   This is a sample skeleton for your application. 
      // 

      require_once 'facebook.php';

      $appapikey = 'your_appapikey';
      $appsecret = 'your_appsecret';
      $facebook = new Facebook($appapikey, $appsecret);
      $user_id = $facebook->require_login();

      // Greet the currently logged-in user!
      echo "<p>Hello, <fb:name uid=\"$user_id\" useyou=\"false\" />!</p>";

      // Print out at most 25 of the logged-in user's friends,
      // using the friends.get API method
      echo "<p>Friends:";
      $friends = $facebook->api_client->friends_get();
      $friends = array_slice($friends, 0, 25);
      foreach ($friends as $friend) {
        echo "<br>$friend";
      }
      echo "</p>";
      ?>
    • 此為官方範例,結果是印出使用者 25 位朋友
  7. 最後的設定
    • 連至 Facebook | 開發人員 並且點選應用程式名稱為 "Example" 的 "編輯設定"
    • 切換至[畫布]頁面,並且至少設定以下資訊
      • 畫布頁面網址
        • http://apps.facebook.com/your_app_name/
        • 這是 Facebook 使用者連到你的應用程式的 link 位置
      • Canvas Callback URL
        • http://Your_Web_Service/facebook_example/
        • 這是你擺放運行程式碼的機器,至少提供 Web Service 跟運行 PHP 的能力
  8. 測試連結,請先登入 Facebook,接著連到 http://apps.facebook.com/your_app_name/ 位置,接著像使用其他程式服務一般,蹦出同意訊息,點選過後,就會呈現出運行結果,此例是列出使用者的名字,並且列出 25 位朋友的 ID

如此一來,就完成使用 Facebook API Example 啦,這支算是簡單的程式,剩下的就是如何善用 Facebook 的社群資訊和力量囉。

yoonow 發表在 痞客邦 留言(1) 人氣()

原文網址:http://clonn.blogspot.tw/2011/01/facebook-api-php-sdk.html

以下轉載原文

---------------------------------------------------------------------------------------------

[教學] Facebook API PHP SDK 基本篇. Facebook API PHP SDK Basic introduce.

 
快速教學如何使用php建構自己的APP

Facebook 中建立application 取得Keys
Facebook developer application page.
 

進入頁面後如下圖所表示,根據提示快速建立Application.
 
 
建立好app,可以進入到內部將Domain name, email, ...等資料補齊。
 
TIP:Domain name一定要設定好,不然會導致無法使用。







下載Facebook API for php,把資料解壓縮開來,我們只需要兩個檔案。

1. facebook.php
2. example.php

將兩個檔案放到同個資料夾當中,修改example.php

$facebook = new Facebook(array( 'appId' => '你的APP ID', 'secret' => '你的應用程式密鑰', 'cookie' => true, )); 

接著檔案上傳到Server上,執行你的APP。

以下為簡化後的example.php內容。

<?php require 'facebook.php'; // Create our Application instance (replace this with your appId and secret). $facebook = new Facebook(array( 'appId' => 'appid', 'secret' => 'secret key', 'cookie' => true, )); $session = $facebook->getSession(); $me = null; // Session based API call. if ($session) { try { $uid = $facebook->getUser(); $me = $facebook->api('/me'); } catch (FacebookApiException $e) { error_log($e); } } if ($me) { $logoutUrl = $facebook->getLogoutUrl(); } else { $loginUrl = $facebook->getLoginUrl(); } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Clonn.info - Facebook API demo PHP SDK</title> <style> body { font-family: 'Lucida Grande', Verdana, Arial, sans-serif; } h1 a { text-decoration: none; color: #3b5998; } h1 a:hover { text-decoration: underline; } </style> </head> <body> <h1>Pure PHP SDK, without javascript</h1> <div> <ul> <li><a href="<?php echo $facebook->getLogoutUrl(); ?>">LogOUT</a></li> <li><a href="<?php echo $facebook->getLoginUrl(); ?>">LogIN</a></li> </ul> </div> <h3>Session</h3> <?php if ($me): ?> <pre><?php print_r($session); ?></pre> <h3>You</h3> <img src="https://graph.facebook.com/<?php echo $uid; ?>/picture"> <?php echo $me['name']; ?> <h3>Your User Object</h3> <pre><?php print_r($me); ?></pre> <?php else: ?> <strong><em>You are not Connected.</em></strong> <?php endif ?> </body> </html> 


直接想要看結果,可以點此連到範例頁面頁面內容如下。



yoonow 發表在 痞客邦 留言(1) 人氣()

原文網址:http://coding.anyun.idv.tw/2012/03/07/using-facebook-javascript-sdk-get-uid-or-accesstoken/

以下轉載原文

----------------------------------------------------------------------------------

前言

之前曾寫過【如何使用 Facebook C# SDK 發佈訊息到塗鴉牆】,其中有提到使用 Facebook JavaScript SDK 來取得 AccessToken 的方式,但是由於 Facebook 正式啟用 oAuth 2.0,因此有修改了一些東西,所以可能會有無法使用的一天,因此特別寫一篇新的教學,這次直接使用 Facebook JavaScript SDK 來取得 AccessToken,因此可以套用到任何程式語言的網頁,此外也順便提供取得使用者 UID 的語法,就可以方便實作出使用 Facebook 登入網站的系統囉!

實作

第一步是申請開發者帳號和申請 AppId,這邊就不多說了,可以參考我之前的文章

接下來一樣先掛載 Facebook JavaScript SDK 的 js 檔案。

1

再來準備我們的 HTML

1
2
3
4
5
6
7
8
9
10
<div id="fb-root">
</div>
<p>
    <input id="FBLogin" type="button" value="登入臉書" />
</p>
<p>
    <span id="uid"></span>
    <br>
    <span id="accessToken"></span>
</p>

第一個 div 是 facebook 規定一定要有的, id 是 fb-root,否則的話就會出現 JavaScript 錯誤。

然後準備一個按鈕和之後要顯示 UID 和 AccessToken 的元素。

接下來先初始化 Facebook javaScript,而裡面的 {app_id} 就是第一步驟所申請的 AppID。

1
2
3
4
5
6
FB.init({ appId: '{app_id}',
    status: true,
    cookie: true,
    xfbml: true,
    oauth: true
});

首先是出現登入 Facebook 取得授權的頁面,這邊我設定是可以取得 EMail 的權限。

1
2
3
4
5
$("#FBLogin").click(function () {
    FB.login(function (response) {
        // 登入之後執行的語法
    }, { scope: "email" });
});

接下來就是取得 UID 和 AccessToken ,這邊我使用 FB.getLoginStatus 這一個方法,因為它所回傳的資料包含了我們所需要的 UID 和 AccessToken

1
2
3
4
5
6
7
8
9
10
11
12
FB.getLoginStatus(function (response) {
    if (response.status === 'connected') {  // 程式有連結到 Facebook 帳號
        var uid = response.authResponse.userID; // 取得 UID
        var accessToken = response.authResponse.accessToken; // 取得 accessToken
        $("#uid").html("UID:" + uid);
        $("#accessToken").html("accessToken:" + accessToken);
    } else if (response.status === 'not_authorized') {  // 帳號沒有連結到 Facebook 程式
        alert("請允許授權!");
    } else {    // 帳號沒有登入
        // 在本例子中,此段永遠不會進入...XD
    }
});

本函數所回傳的資料,其中 status 是代表登入的狀態,總共包含三種:

  • connected
    代表目前為登入狀態,而且有允許授權得此應用程式
  • not_authorized
    代表目前為登入狀態,但是沒有允許授權得此應用程式
  • unknown
    代表使用者沒有登入,無法得知是否有授權

執行之後就可以取得我們要的資料囉!

線上範例網站

結論

我們取得 UID 和 AccessToken 可以幹嘛呢?

如果是 UID 的話,因為每一個 Facebook 帳號都只會對應到一個專屬的 UID,因此我們取得之後就可以把它記錄在資料庫,當做我們系統使用者帳號的主鍵,這樣下一次登入之後取得 UID 一比對就可以知道是哪位使用者了,就可以讓使用者以 Facebook 帳號當做登入的帳號囉!

而 AccessToken 的話就可以透過此 Token 來呼叫 Facebook 的 API ,比如說發佈訊息等等。再配合【如何使用 Facebook C# SDK 發佈訊息到塗鴉牆】所提過的 offline_access 權限,可以把它存在資料庫,之後系統就有很多發揮的空間囉!

參考資料

FB.getAuthResponse

FB.getLoginStatus

Updated JavaScript SDK and OAuth 2.0 Roadmap

yoonow 發表在 痞客邦 留言(0) 人氣()

原文網址:http://blog.yam.com/tagtoo/article/30242304

以下原文轉載

------------------------------------------------------------------------------------------------------------

最近試著把Tagtoo的服務中  利用到facebook api的部分改成新版的api
 由於當初第一次寫的時候有step by step的tutorial  而那篇tutorial裡面講到的功能  差不多就是我要的
 所以不費太多心思就把它完成了  現在新版api似乎還找不到那麼詳細的教學
 便花了一些時間摸索  這裡是一些心得  備忘之餘  若能幫其他開發者省一點時間
 也是功德一件摟~

Note: 我用的純粹是 javascript SDK

 先來講一個很容易發生的錯誤

1 var uid;
2 var email;
3 var name;
4 alert("outside: " + email); 
5 FB.api('/me', function(response) {
6     uid = response.uid;
7     email = response.email;
8     name = response.name;
9     alert("inside: " + email);
10 });
11 alert("outside: " + email);

以上的code做的事很簡單-- 取得用facebook connect登入你網站的網友之email
我們將會以facebook api進行查詢(第5~10行) 然後用變數"email"來存這個查詢到的值
注意第4 9 和 11行都是單純的alert指令 目的只是方便觀察變數email的值
不算是實質內容的一部分

實際執行上述程式碼 會發現一個很奇怪的現象
總共出現三次對話視窗  內容分別是 
1st: outside: undefined(第4行的執行結果)
2nd: outside: undefinde(第11行的執行結果)
3rd: zouber@gmail.com(第9行的執行結果)
若是沒經驗的話  一定會覺得很奇怪 
我明明在第7行已經賦與email值了 怎麼還是undefined?

仔細一想 合理的解釋 應該是第11行優先於第7行執行了
按理說程式運行原則上是由上至下逐行執行才對 怎麼會這樣?

可以先動動腦...



動動腦時間










問題出在第5行  當我們用facebook api查詢網友資料時
其實就隱含了ajax的意涵在裏頭  我們實際上是對facebook的server發了一個ajax request
也因為如此  所以這類的facebook api都少不了指定一個callback function
亦即當這個請求完成時  原頁面必須要有對應的後續處理
所以  看起來輕輕鬆鬆的一行程式碼  其實已經隱含了複雜的ajax request發出程序在裏頭

相信對ajax稍有概念的人就知道  ajax其實就是為了達成媲美桌面應用程式的反應性產生的技術
達成的方式是當使用者發出此類的請求後  用非同步的方式去處理它
簡單來說就是發出請求後  原網頁繼續運行  完全不會有任何停滯
同時請求傳到伺服器   同步處理  直到處理完畢  用戶端收到通知
啟動callback function 處理伺服器回傳的資料(也可能沒有任何回傳資料)

一個有點類似的概念是飛彈的"射後不理"
戰機射出飛彈後  完全不必理它  此時戰機和飛彈各做各的事
像兩個不相干的個體  一段時間後戰機會收到通知以了解飛彈的去向
最終戰機會收到通知  便可知道飛彈到底是擊中目標還是失誤

所以本來是一直線的程式執行流程
到了第5行以後分岔成兩支
一支是程式原本的流程A
另一支是新啟動的  對facebook資料庫進行查詢的流程B兩個流程同步進行  流程B進行完畢後  才會執行第6~9行
而流程A直接就執行接下來的第11行 
所以  第7行和第11行之間變成沒有絕對的順序關係
而以現階段的網路速度來說  有非常大的機率是第11行比第7行(必須等遠端請求完成)還要先被執行
也就是我們所看到的實驗結果

這個bug道理其實不難  只是簡短一兩行facebook api就能進行ajax機制時
我們必須時時注意  別被下意識的直覺騙了
debug很累的...

Note: 若對本範例涉及的api有興趣  請見此頁 和 此頁
要取得網友的email 必須在他登入facebook connect 時請求權限
FBML語法: "<fb:login-button  perms='email, publish_stream'></fb:login-button>"
其中perms屬性即列舉所有想請求的權限  就本例而言
我請求了取得網友email以及發布訊息到他塗鴉牆(publish_stream)的權限

zouber

yoonow 發表在 痞客邦 留言(0) 人氣()

很實用的技巧。
http://sofree.cc/htaccess-img/

yoonow 發表在 痞客邦 留言(0) 人氣()

很多FB的API應用文章

http://blog.yam.com/BlogIndex.php?BLOG_ID=tagtoo&CATEGORY_ID=3250790

 

yoonow 發表在 痞客邦 留言(0) 人氣()

原文網址:http://www.techbang.com/posts/2905-column-the-opera-mobile-o-simulator-to-create-the-perfect-mobile-site

以下轉載原文

-------------------------------------------------------------------------------------------

 

【編按】Opera除了長期支持、制定、推廣HTML、CSS等網頁標準外,由於也針對各種裝置打造瀏覽器,所以對行動裝置網頁介面的打造也有著相當豐富的經驗。各大網站紛紛打造行動裝置使用的網頁,像是最近蘋果日報也都推出手機版。要如何測試行動版網頁是否能正常運作呢,看看Opera推出的解決方案:

 

隨著3G網路的普及化,而且上網功能從智慧型手機開始向中、低階手機擴張,愈來愈多人開始用手機上網。有些人喜歡用手機搜尋、閱讀新聞、有的人喜歡玩Twitter、噗浪、或是上Facebook看看好友的即時狀況。因為這樣的需求,也讓使用者對於手機瀏覽器的要求與期望變得越來越高。大致上,主流的手機瀏覽器開發商通常也擁有桌面版的瀏覽器,比如Opera、Apple的Safari、微軟的IE;也有一些開發者專門只做手機瀏覽器,如SkyFire、以及中國大陸網民慣用的UCWeb等。

手機瀏覽器多變,網頁設計困難遽增

大部份的人可能不知道,由於手機硬體與作業系統的不同,手機瀏覽器會進一步分為智慧型手機(Smart Phone)與功能型手機(Feature Phone)兩種。一般來說,智慧型手機的瀏覽器功能較完善,而功能型手機的瀏覽器會更節省硬體資源,讓行動瀏覽較有效率。

以目前手機瀏覽器市占率較高的Opera來說,Opera Mobile和Opera Mini便是如此。Opera Mobile僅能安裝在S60、Windows Mobile、Maemo等智慧型手機,瀏覽功能完善且較符合網絡標準。而Opera Mini能夠壓縮網頁的特性,可以適合市面上大部份手機系統(包括iPhone)使用。與SkyFire和UCWeb這些瀏覽器相較,能夠使用Opera的手機種類比較多。而Safari與IE都直接內建在智慧型手機的作業平台中,有的玩家會額外下載第二個手機瀏覽器來滿足不同的用途。可是這麼多的手機瀏覽器,跑出來的網站畫面都不相同,對網站開發者而言是一大挑戰。

利用Opera Mobile模擬器預覽

網站經營者一定會發現來自手機的流量與日俱增,得為手機介面進行最佳化。但打開流量紀錄,各式各樣的手機、各式各樣的瀏覽器,透過Wi-Fi、3G、EDGE等各種連線都有,要怎麼作才好?真的會讓開發者一個頭兩個大。在不久的將來,還會小尺寸的平板電腦、行動多媒體播放器、掌上型遊戲機以及電子書等等,通通都會湧入上網的行列,網站要在不同螢幕尺寸、不同手機設備上保持一致美觀的畫面,讓訪客感到滿意實在不容易。

以前,開發者如果要確保網站在手機螢幕上完美呈現,得要拿不同款式的手機一個個進行測試。不過現在有免費的Opera Mobile 模擬器(Opera Mobile Emulator),讓網站開發者能透過它測試網站在各式不同使用環境的表現。可以設定不同的裝置連線規格,包括了手機的User Agent String(如S60、Windows Mobile...),螢幕長寬度,以及是否為觸摸螢幕等。

▲Opera Mobile模擬器在Mac上模擬手機瀏覽器的畫面。

Opera Mobile模擬器可以讓你設定不同的手機螢幕使用界面,但必須透過工具程式(Utility Command)的命令列來設定以下選項:(備註:倘若要查看更詳細的參數,也可以透過「OperaMobile --help」列舉。)

  • -geometry(寬x長)
  • -notouch(取消觸控設定)
  • -widgetmanager(啟動 Opera Widgets)

現在就來實際操作,假如我們要啟動一個640 x 480、沒有觸控功能的手機畫面模擬器:

Step 1:先在終端機找出Opera Mobile的預設位置:

  • Windows:C:\Program Files\Opera Mobile 10\ 
  • Linux:/usr/bin/
  • Mac:/Applications/Opera Mobile.app/Contents/MacOS/ 

▲在Mac的終端機中輸入設定指令來設定手機畫面模擬器。

Step 2:需要輸入的指令列為:-geometry 640x480 -notouch

  • Windows的指令是:OperaMobile.exe -geometry 640x480 -notouch
  • Linux/Mac的指令是:./operamobile -geometry 640x480 -notouch

▲目前常見的直向與橫向手機與7吋平板電腦的螢幕解析度,都可以透過Opera Mobile模擬器來設定。

在手機網頁直接抓臭蟲

Opera Mobile模擬器有個很方便的功能,就是能直接在電腦上為手機網頁除錯(debug)。當然你必須先安裝Opera桌面型瀏覽器,叫出附屬的Dragonfly除錯工具。Dragonfly是Opera所開發的開源除錯工具,目的是讓開發者可以在瀏覽器上即時為網頁除錯。現在除了可以在Opera桌面瀏覽器上使用Dragonfly,Opera Mobile模擬器也可以遠端除錯。步驟如下:

Step 1:從Opera桌面型瀏覽器選單找到「工具>進階>Opera Dragonfly」。

Step 2:底下視窗便是Dragonfly的工具列,進入「設定>遠端除錯>勾選遠端除錯」。

▲內建於Opera桌面瀏覽器的Dragonfly除錯程式。

Step 3:到Opera Mobile模擬器中輸入「opera:debug」,然後按下「Go」。

Step 4:Opera Mobile模擬器中IP號碼和通訊埠必須與Dragonfly的設定一樣,然後按「套用」。

▲Opera Mobile模擬器連接Opera Dragonfly進行遠端除錯。

Step 5:設定完成後透過Dragonfly所進行的除錯,可以馬上在Opera Mobile模擬器中看見。

▲利用Opera Dragonfly除錯程式秀出T客邦網站的網頁程式碼。

▲在Opera Mobile模擬器裡調校Techbang網站。

總結

透過Opera Mobile的模擬器,程式設計師可以觀看網頁在不同手機上的表現,更可以透過Opera Dragonfly,在Opera Mobile模擬器上的網站做遠端除錯。如此更可以設計出適合各種螢幕尺寸觀看的完美網頁,節省測試的時間與精力。

參考資源:

yoonow 發表在 痞客邦 留言(0) 人氣()

原文網址:http://www.minwt.com/?p=2501

以下轉載原文

------------------------------------------------------------------------------------------------------

梅問題-行動網頁教學-自動切換電腦與手機版本  現在隨著行動上網愈來愈夯,各大入口網站也紛紛的開始製作行動裝置的網頁,雖然說新一代智慧型手機中的瀏覽器,與電腦中所用的瀏覽器幾乎相同,皆可正常的瀏覽各大網站,但由於手機的螢幕與電腦相比,差異相當的大,以至於當使用手機來瀏覽電腦網頁時,就得手指放大魯來魯去,才可找到自已所要的資訊,這對於手機瀏覽上有些不便,所以會發現到,各大網站則會專門針對手機的版面加以設計,讓版面符合手機的瀏覽模式,除此之外使用者用手機瀏覽時,網頁也會自動切換為手機版本,而要這要怎麼辦到呢? 其實這需要透過Server端的程式來作一點小判斷,就可以作到自動的切換,這邊梅干整理一下手邊的資料, 分別針對PHP與ASPX作介紹。 


PHP版本判斷:

View Code PHP
 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
$mobile_browser = '0';
 
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}
 
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}    
 
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-','Googlebot-Mobile');
 
if(in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}
 
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
}
 
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
}
 
if($mobile_browser>0) {
        header("Location: mobile.php"); //手機版
}else {
        header("Location: pc.php");  //電腦版
}

ASPX版本判斷:

View Code C
 
1 2 3 4 5 6 7 8 9 10 11
  protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Headers["user-agent"] != null && Request.Headers["user-agent"].ToLower().ToString().IndexOf("windows") != -1)
        {                        
            Response.Redirect("pc.aspx"); //電腦版 
        }
        else
        {
            Response.Redirect("mobile.aspx"); //手機版
        }
    }

之後上傳到網頁空間中,當用手機瀏覽時,就會自動切換到手機版的網頁,若是使用電腦時,就會自動切換為電腦的版本,經梅干測試的結果,目前在iPhoneAndriod平台皆可正常切換,由於手邊沒有WinPhone,也請各位有WinPhone的朋友幫忙測試看看囉!
梅問題-行動網頁教學-自動切換電腦與手機版本 
梅問題-行動網頁教學-自動切換電腦與手機版本

[範例預覽-ASPX版本] [範例預覽-PHP版本] [範例下載]

yoonow 發表在 痞客邦 留言(1) 人氣()

原文網址:http://www.minwt.com/?p=2529

以下原文轉載

---------------------------------------------------------------------------------------------

先前梅干已分享一篇,手機版網頁自動切換,當會自動切換後,接下來就是要開始來製作手機版的網頁囉!其實看起來手機中的瀏覽器與電腦相同,只要電腦版能正常運作,在手機上應該都可正常預覽,確實是如此但今天若要專門讓手機來瀏覽時,這時就有點不太相同了,除了版面要另外設計外,還有一個相當重要的東西,那就是版頭的宣告,一般在作網頁時,上面所宣告的是給電腦版使用,若用此宣告放到手機版時,則會發現到怎網頁的版面都縮小,這是由於手機內建的瀏覽器,當網頁為電腦版就會把版面撐到980像素,所以當要開始製作手機版網頁時,首先要做就是版頭的宣告,這樣網頁在手機下,才可正常顯示手機版的尺寸大小。



在宣告的部分有二種方式,一種是加在html上,另一種是加在<head>~</head>之間,二者取其一就行了,若要二邊都加的話也可以。
方法一、加在<html>上方:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">


梅問題-手機網頁-手機網頁檔頭宣告設定


方法二、加在<head>~</head>之間:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />


梅問題-手機網頁-手機網頁檔頭宣告設定


  當加完畢後,這時再用手機瀏覽看看,這時版面就不會縮起來,就會依照手機的顯示尺寸,只要一個小動作卻有180度的大不同,而梅干也弄了個小範例,一個是有加手機版網頁宣告,另一個是一般的網頁宣告,各位可以用手機瀏覽看看喔!若你也正準備開始著手開發手機網頁時,別忘了記得要加入手機版的網頁宣告喔!

yoonow 發表在 痞客邦 留言(0) 人氣()

http://audi.tw/Blog/JavaScript/javascript_calendar.asp

yoonow 發表在 痞客邦 留言(0) 人氣()