不得不說chrome的模擬iphone手機尺寸的功能為開發(fā)人員提供了很多便利的條件魔吐，盡管經(jīng)過一些配置，也隨時可以在手機上面瀏覽酌媒。但是重要的是chrome還可以審查元素舅桩，更好的幫助我們進行調(diào)試句惯，查找錯誤豫喧。所以我們可以先用chrome去模擬靴跛，最后再在真機上測試诊霹。
打開的方法是在頁面中右鍵點擊審查元素羞延，就會出現(xiàn)一個開發(fā)人員的工具條，工具條上面有一個手機樣式的圖標脾还，點擊伴箩，就切換到了模擬手機的模式。
模擬中鄙漏，iphone的系列是比較全的嗤谚，Android系列的比較少，但是可以自動去添加機型的尺寸怔蚌。點擊下圖中的編輯按鈕巩步，按照下面的步驟就可以添加新的尺寸了。之后在選擇手機版本那里就可以選擇自己所添加的尺寸桦踊！
真實iphone系列顯示內(nèi)容區(qū)域的尺寸
在做fullpage頁面時發(fā)現(xiàn)的問題是渗钉，在chrome里面模擬的好好的，總是和真實手機有差別，最后經(jīng)對比發(fā)現(xiàn)chrome模擬的尺寸是手機整個屏幕的尺寸（包括上下欄目條）鳄橘，而瀏覽器展示內(nèi)容的區(qū)域是不包括上下欄目條的声离，就導致了真機和模擬的差別。知道了問題的所在瘫怜，就可以解決术徊，只需要自己重新配置幾個真實內(nèi)容展示區(qū)域的尺寸就OK了。
iphone系列真實內(nèi)容展示區(qū)域尺寸（默認都是寬X高鲸湃，瀏覽器為safari）
iphone4/4s 320 X 370 （屏幕尺寸： 320X370）
iphone5/5s 320 X 457 （屏幕尺寸： 320X568）
iphone6 375 X 554 （屏幕尺寸： 375X667）
iphone5 plus 414 X 628 （屏幕尺寸： 414X736）
android部分手機的真是內(nèi)容展示區(qū)域尺寸（默認都是寬X高）
三星 9300 默認瀏覽器 360 X 568 (屏幕尺寸： 360 X 640)
三星 9300 UC瀏覽器 360 X 518 (屏幕尺寸： 360 X 640)
oppo r7s UC瀏覽器 360 X 470 （屏幕尺寸： 1080 X 1920）
android方面的尺寸還沒有研究過赠涮，因為安卓的測試機有限，待研究暗挑，也或許沒有這個問題笋除。而這個尺寸的問題對于普通頁面來說沒有太大的影響，對于fullpage頁面的影響較大炸裆。
延伸閱讀之
設計稿尺寸
設備獨立像素與物理像素的區(qū)別
