作為UI設(shè)計師笋妥，我們在做web頁面的時候會接觸到各種各樣的屏幕尺寸，最常用的有1920-1080窄潭、1440-900春宣、1366-768、1280-800等，目前用戶電腦中最大的尺寸當(dāng)屬1920了（Mac的5K屏幕可以忽略月帝，用戶基數(shù)太少）躏惋。
問題隨之而來：很多設(shè)計師使用13寸和15寸的Retina MacBook，默認(rèn)視覺分辨率（并非物理分辨率）只有1280-800和1440-900嚷辅，有的公司不給配外接屏幕簿姨，那么如何用筆記本預(yù)覽1920的網(wǎng)頁效果呢？
Chrome瀏覽器的設(shè)備模擬功能可以幫助我們簸搞，只用一臺筆記本就可以模擬任何屏幕尺寸款熬。
看完本文你將解決以下問題
如何在筆記本電腦上模擬大尺寸網(wǎng)頁和手機網(wǎng)頁
了解Chrome瀏覽器的設(shè)備模擬功能
打開Chrome的設(shè)備模擬功能
1-在頁面上右鍵選擇檢查
2-點擊下方彈出層左側(cè)手機圖標(biāo)
3-發(fā)現(xiàn)頁面變化縮放了，點擊頂部的設(shè)備切換按鈕
4-選擇Edit...打開設(shè)備編輯頁面
添加設(shè)備屏幕尺寸
在編輯頁面中Chrome內(nèi)置了很多常用的設(shè)備尺寸攘乒，平板贤牛、手機電腦都有。所以很多時候我們不用手機则酝，在電腦中就可以模擬預(yù)覽手機網(wǎng)站的頁面效果殉簸。
接著我們來添加一個1920的屏幕尺寸，步驟見下圖：
為了好區(qū)分沽讹，設(shè)備名稱直接寫1920般卑，后面如果想添加1280，就寫1280爽雄。
我們現(xiàn)在添加的是Web頁面蝠检，所以一定要選擇Desktop，手機的話選擇Mobile挚瘟。Chrome已經(jīng)為我們設(shè)置好各種手機尺寸了叹谁，所以不再添加。
還有一點需要注意乘盖，高度我寫的是960焰檩，并非1080，這是為什么呢订框？跟網(wǎng)頁實際顯示范圍相關(guān)析苫。
網(wǎng)頁實際顯示范圍
拿1920-1080屏幕電腦來說，實際上穿扳，網(wǎng)頁的首屏展示高度并非是1080衩侥，而是要減去電腦系統(tǒng)的菜單欄和Chrome的各種欄目高度，大約是120矛物，1080-120=960茫死。所以我們的模擬尺寸高度也需要減小。如下圖：
瀏覽器不一樣可能這個值有所差別泽谨。在PC中璧榄，系統(tǒng)菜單欄是在下方特漩，道理一樣。
用新增的1920預(yù)覽網(wǎng)頁
添加完1920的設(shè)備后骨杂，就可以在設(shè)備切換中選擇1920來模擬了涂身。
由于電腦屏幕小，只能顯示以30%的縮放來展示搓蚪，不過這個縮放比例可以調(diào)節(jié)蛤售，大家可以嘗試下。
另一種網(wǎng)頁縮放
還有一種縮放網(wǎng)頁的方法是直接減小網(wǎng)頁比例妒潭，具體做法是快捷鍵cmd++/-悴能。
但是縮小到一定程度，網(wǎng)頁字體就不會再縮小雳灾，整個樣式布局也會被破壞漠酿，效果很不好，不建議使用谎亩。
所以我們以后其實不需要申請外接屏幕炒嘲，一樣可以用筆記本預(yù)覽大屏幕效果，希望本文能夠給各位UI設(shè)計師帶來設(shè)計效率上的提升匈庭。
更多UI設(shè)計干貨文章請關(guān)注UI黑客
微信公眾號 uihacker
UI黑客官網(wǎng)http://www.uihacker.com/
UI黑客論壇http://bbs.uihacker.com/
