<-- IE錯誤修正 --> Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2 週前
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形

Click the image to open in full size.(Copyright: rido / 123RF Stock Photo) 記得幾年前架設 WordPress 網站時,會透過行動版外掛功能來打造更適合手機或平板電腦閱讀的環境,這個作法通常是將手機使用者引導至另一個佈景主題,專為行動裝置特別設計,無論在網頁大小或載入速度上都會比桌面版更適合行動裝置使用者閱讀。雖然看起來是個很不錯的解決方案,但其實也會出現一些問題,例如:不一定適合所有螢幕大小的行動裝置、必須維護兩個不同的佈景主題等等,因此後來趨勢就逐漸轉為使用「自適應網頁設計」(Responsive Web Design)替代。



那什麼是自適應網頁設計呢?簡單來說,它可以依照不同螢幕大小,自動調整網頁佈局,例如螢幕寬度足夠時顯示側邊欄,不足的話側邊欄就自動隱藏或移動至下方,這麼做的好處是不用額外維護另一個網頁佈景主題,那麼如果正在開發自適應網頁設計版型,要怎麼知道它在不同裝置的顯示樣式呢?

本文要介紹的「Responsive Screenshots」是一款用來檢視自適應設計的免費線上工具,只要輸入檢測網址,即可預覽網站在 iMac、Macbook、iPad 及 iPhone 下的顯示情形,或是切換特定尺寸的電腦或行動裝置,也能將產生的擷圖下載保存。

比較可惜的是 Responsive Screenshots 不支援中文顯示,中文字在圖片上可能無法完整出現,但這個工具主要用意是查看網頁整體的版型或樣式,即使無法顯示中文也不影響它的可用性,只是擷取的圖片沒那麼好看。

網站名稱:Responsive Screenshots
網站鏈結:https://responsive-screenshots.com/

使用教學

STEP 1

開啟 Responsive Screenshots 網站後,可以看到一個網址列及四個預設裝置,預設情況下會在 iMac 27、Macbook Pro 15、iPad 及 iPhone X 下測試網頁的顯示樣式情形。

Click the image to open in full size.

STEP 2

如果有特殊需求,也可以從下方裝置部分點擊、選擇其他同類產品,例如 Macbook 也可以選 13 吋或 Macbook Air 等不同產品線。

Click the image to open in full size.

桌上型電腦除了 iMac 27 外,也有 iMac 21.5 及 Apple Thunderbolt 螢幕。

Click the image to open in full size.

STEP 3

輸入網址後,點擊右側的「Grab Shots」按鈕來獲取擷取畫面,網頁會提示你可能會耗費 5-10 秒鐘時間,取決於你測試的網頁大小而定,在結束前請先不要關閉網頁。

Click the image to open in full size.

STEP 4

測試完成後 Responsive Screenshots 會顯示網頁在不同螢幕大小的裝置呈現出來的效果,如同前面所說,有些使用 RWD 的頁面當整體寬度足夠時才會顯示選單及側邊欄,若寬度不足(例如使用平板電腦或手機)就會隱藏選單及側邊欄,讓有限的空間可以被更有效率應用,也更能符合各種螢幕大小閱讀。

Click the image to open in full size.

如果你想看更大張的擷取畫面,Responsive Screenshots 網頁最下方能下載 JPEG 格式擷圖,也能點擊「Download ZIP」批次下載所有測試結果。不過真的很可惜的是中文無法正確顯示,不然就更值得中文網站使用了。

Click the image to open in full size.

值得一試的三個理由:

  1. 測試網頁在 iMac、Macbook、iPad 及 iPhone 裝置顯示情形
  2. 可依照需求調整不同螢幕尺寸大小
  3. 產生後的截圖可下載,或打包批次下載所有畫面

喜歡 Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
ScrnShots - 線上網站截圖(Screenshots)共享社群,可上傳、支援圖片外連! wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2008-12-13 06:17 PM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +9。現在的時間是 11:16 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2017,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2