文章彙整

Safari前端開發-在實機裝置上檢測你的網頁

By Astral Web 11 months agoNo Comments
首頁  /  網站設計與開發  /  Safari前端開發-在實機裝置上檢測你的網頁

safari front-end development (1)

在一個網頁響應式設計(以下簡稱RWD)盛行的時代中,要如何把RWD寫好寫滿是前端開發者時常會遇到的問題。除了Andriod系統的強大Google Chrome之餘,第二排名的無非就是Apple iOS的Safari吧!

 

在一般的開發下,前端的好朋友“網頁檢閱器(即Chrome的開發人員工具)”所提供的模擬器功能,可以幫助開發者在模擬裝置的情況下,去完成RWD的開發。但是實際上往往又會遇到模擬器與實機呈現的畫面不同的情況,例如某些css的屬性在模擬器下有支援,但在實機上卻是不支援的,亦或是某些html標籤在一些特殊字元下,會被裝置自動加上標籤或轉換成別的呈現方式,以往在這樣的情況下,前端開發者只能用猜測的方式去進行修正。在這樣無法直接針對問題點修改的情況下不但費時又費神。

 

但是現在遇到這種情形已經不需要再進行這麼麻煩的冥想式Coding了!

 

(此方法適用於iOS系統如iPoneiPadiTouch等行動裝置上的Safari瀏覽器。)

 

首先需要打開測試對象的設置功能:

設定 → Safari → 進階 → 網頁檢閱器 → 點開

 

safari front-end development (2)

 

接者使用USB連接你的iOS裝置,在要測試的iOS裝置上使用Safari並開啟測試的網址,然後回到主裝置上(ex:Mac)打開Safari,點選上方選項的“開發”,這邊會顯示有連接的裝置(ex:這邊是iPad),右邊會顯示目前在此裝置上Safari開啟的頁面,點選我們要查看的頁面:

 

safari front-end development (1)

 

這邊會直接開啟一個Safari網頁檢閱器

safari front-end development (3)

 

如果我們把滑鼠點在這上面的話,就可以看到以往檢視目標的樣子:

 

safari front-end development (4)

 

如此一來我們就可以直接對照著裝置,檢查到底是哪個元素或屬性出了差錯,來快速的修正問題。

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。