之前有寫 一篇文章 談 Responsive Design 的概念,中文似乎沒有統一,先稱為自適性設計吧
許多知名的網站框架都有導入這樣的概念 (例如:Twitter 所用的 Bootstrap)
可以大幅減少開發的時間
這次製作了一張圖,直接說明其意義:
如果嫌圖片太小,這裡有原圖可以觀看
其中 pixel 所列的數字是大致參考值
確切數字還是必須根據裝置不同而定
如果有錯誤,歡迎指正!
剛看到這篇文章, 剛好最近也在做 iPad APP
其實 iPad, iPhone 上面的 APP 的 Design Style 跟 Web 差蠻多的
真的做下去才知道,建議大家可以去比較看看 Mobile App 所著重的點是哪一些
在網路上看到這份簡報
http://speakerdeck.com/u/mikeyk/p/secrets-to-lightning-fast-mobile-design?slide=82
簡報製作人是 Instagram 的 co-Founder
寫的很好,也說明了 Instagram 成功的關鍵是以下兩項
1.程式怎樣寫不是那麼重要,真正重要的使用者的體驗
not the code, but the experience
2. 手機APP設計需要 Design 與 Development 的緊密配合
mobile design requires the ultimate in design & development collaboration
最近下載的一個 App ,可以讓人塗鴉並讓別人去猜他在畫什麼,以下有他的介紹影片
有趣‧好用‧互動,是一個很不錯的 App ,目前已經有 iOS 與 Android 的版本了,快去玩玩吧 XD
在 wowboxBlog 網頁設計知識庫 有看到以 PHP 自動偵測使用者端為手機或是電腦的 PHP 程式碼
覺得很輕巧很好懂,故轉錄在此
$mobile_browser = '0'; if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) { 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_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4)); $mobile_agents = array( if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) { if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) { if($mobile_browser>0) { //有偵測到手機的 agents
$mobile_browser++;
}
$mobile_browser++;
}
'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++;
}
$mobile_browser++;
}
$mobile_browser=0;
}
header("Location: mobile.php"); //手機版
}else {
header("Location: pc.php"); //電腦版
}
希望對各位有幫助 : )