用 Safari 來模擬各種裝置的網頁顯示畫面「回應設計模式」

像 Echo 在寫部落格校稿文章的時候,除了會預覽電腦網頁的版本外,也會額外校稿行動裝置上看文章的排版,但有時手邊並不是什麼行動裝置都有,而且文章也還沒有發佈,所以是沒有辦法直接在行動裝置上看的;在 Safari 裡有一個很棒的功能就是可以直接在網頁上模擬各種行動裝置的顯示方式,甚至連 iPad 的多工處理都可以模擬出來,對於有在寫網頁的使用者來說是一個非常方便的功能,至於要怎麼打開呢?我們往下看就知道了!

▲首先先到 Safari 裡的「偏好設定」,在「進階」的項目中,把最下面「開發」的選單打開。

▲這時候在上方的工具列,「書籤」旁邊多了一個「開發」的選項,其中點下「進入回應設計模式」。
(也可以按下快捷鍵 command + option + R )

▲這時網頁頁面就會變成「回應設計模式」。

▲你可以選擇模擬哪個裝置的網頁畫面,選完後記得要按 command + R 重新整理頁面,這樣網頁才會更新。

▲對裝置圖案多點幾次,就會切換其他的顯示方式(橫向、多工處理)。

▲最後要回到原本網頁畫面的話,只要再按一次快捷鍵 command + option + R 就可以了。



更多 Safari 小技巧:

相連文章

臉書留言

一般留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Google reCAPTCHA 保護機制,這項服務遵循 Google 隱私權政策服務條款