剛開始接觸手機設備的時候，碰到的更 多的就是尺寸和適配的問題，目前網(wǎng)站開發(fā)已經(jīng)更多的轉向手機端設計和制作，更多的人開始詢問手機端網(wǎng)頁寬度多少合適？960px、640px、480px、320px？圖片多少寬度適合？比如用640px的圖片寬度設置為320px是否比較清晰？
為手機設備制作前端頁面，往往會遇到很多令人迷惑的情況，本文中，我整理了一些手機設備頁面尺寸參數(shù)和viewport相關的概念和知識，在此，借助鄭州seo公司老秦博客的平臺與大家分享一下。
1、設備像素和CSS像素
CSS像素是固定不變的，瀏覽器上縮放的話，CSS像素會被拉伸或者縮小，設備像素不變。
zoom：css像素和設備像素一致
zoom被縮放：css像素在設備像素里被縮放
2、屏幕尺寸和窗口尺寸
屏幕尺寸和窗口尺寸較好理解，如下圖所示：
但是需要注意的是：當縮放窗口的時候，窗口尺寸更改了，這一點對于后面理解手機端尺寸有一定幫助。
解釋：當放大頁面的時候，窗口尺寸變小了，為什么呢？因為窗口尺寸(window.innerWidth)的定義是窗口里能展現(xiàn)的像素寬高，頁面放大了，頁面里展現(xiàn)的css像素變少了，所以窗口尺寸變小了，相反縮小頁面的時候，窗口尺寸變大了（具體可查看鄭州seo公司老秦博客《詳解手機端設備頁面尺寸設計原理》的相關介紹）。
3、關于手機屏幕的參數(shù)
大家經(jīng)常會聽到一些關于手機的技術參數(shù)，比如lumia920采用4.5英寸1280×760分辨率的屏幕，PPI高達xxx(具體多少沒算)！到底是什么意思呢？
壹 先，4.5英寸是多大？大家可以看到我自己繪制的一副圖（如下圖），圖中里面那圈是3.5英寸的屏幕大小，外面一圈是4.5英寸的屏幕大小，當然我是以魅族m9的屏幕長寬比基礎上放大得到的，實際上，不同手機的分辨率不同會導致屏幕長寬比不一樣，但是屏幕面積是固定的，4.5英寸屏幕的面積是3.5英寸的1.7倍。
有人會問：這3.5英寸是如何算出來的？答案是量出來的，1英寸=2.54cm，關于英制單位，咱們常用到的還有英尺，1英尺=0.3048m（延伸：4.3英寸是多大？）。
接下來，再跟大家介紹一下手機屏幕的幾個參數(shù)：屏幕大小、分辨率、PPI，如下圖所示：
還有一個就是大家常所說的ppi，搞打印的應該經(jīng)常聽說這個詞，咱們平時打印的紙張好像都是300ppi，喬布斯所說的視網(wǎng)膜屏幕就是指ppi超過300，達到人肉眼無法辨別的程度。
那PPI是什么意思？其實就是指沒英寸屏幕上面的像素數(shù)，那到底是如何算出來的呢？咱所說的960×640分辨率，其算法就是：根據(jù)勾股定理算出對角線的像素數(shù)，然后再除以3.5，得出的數(shù)就是ppi，根據(jù)這個算法，我們可以看出如果要提高ppi，要么是減少屏幕尺寸，要么是增加屏幕分辨率！
咱們電腦顯示屏一般的ppi都是在100左右，大家用慣了手機屏幕之后會發(fā)現(xiàn)電腦屏幕不堪入目，雖然說手機的高ppi是因為我們是近距離觀看，電腦屏幕是遠距離觀看，但是區(qū)別還是挺明顯的。
大家的屏幕都可以調節(jié)分辨率，分辨率越小，更 明顯的感覺就是字變大了！反之，字變小了。
一般來說，根據(jù)顯示器的不同，大多數(shù)電腦都可在800×600到1920×1080之間調節(jié)，通常情況下，我還是喜歡用高分辨率，這樣看起來顯得畫面更細膩點，主要還是因為ppi比較高，比較適合我這種和電腦坐的比較近的人，現(xiàn)在大部分手機屏幕的ppi都在300以上，電腦和平板以后也是這個趨勢。
4、viewport的使用
近年來，隨著手機端的快速發(fā)展，越來越多傳統(tǒng)的web應用需要適配手機終端，下面簡單的跟大家介紹一下viewport的使用問題。
（1）、pc上的viewport
viewport并非是手機端的 ，viewport是瀏覽器內部的一個數(shù)據(jù)，它約束html的寬度。
viewport基本等同于窗口尺寸，所以當你縮放窗口的時候viewport會改變，相應的html寬度也會改變。
這個例子中，由于放大頁面，viewport變小，而頁面中的頭部藍條css設置為，跟隨viewport變化，所以右側logo暴露了出來，藍條沒有覆蓋的文檔寬度，而只取viewport的寬度。
（2）、手機終端的viewport
手機終端的viewport更加麻煩一些，有兩種viewport，分別是展示viewport(visual viewport)和布局viewport(layout viewport)。
上面這張圖片你可以這么理解：手機是一個放大鏡，它游走在頁面上，手機上展示的寬高為visual-viewport，而整個頁面的寬高是layout-viewport。
好奇的朋友一定會問，為什么要這樣呢？何必這么麻煩？這是因為手機的尺寸太小了，“手機瀏覽器廠商想給它們的客戶盡可能的提供更好 的體驗，這現(xiàn)在指的就是「盡可能的跟桌面一樣」，因此耍一些花招是必要的?！?/p>
那么，假如我的頁面沒有經(jīng)過任何優(yōu)化，手機默認的layout-viewport是多大呢，“l(fā)ayout viewport有多寬？每個瀏覽器都不一樣，Safari iPhone為980px，Opera為850px，Android WebKit為800px，更 后IE為974px?！?/p>
這就是為什么普通一個頁面在iphone上看會變得很大的原因，iphone默認把你的頁面的viewport設置為980px，也就是說html的寬度默認為980px。
（3）、現(xiàn)代手機端網(wǎng)頁設計與viewport
雖說visual-viewport是為了用戶看得更清楚而做的設定，但實際上，這帶來了用戶體驗上的下降，用戶往往需要縮放和手機頁面，所以現(xiàn)代針對手機端的網(wǎng)頁設計（或者響應式設計）通常采用的方法是，精簡頁面內容，放大視覺元素，避免體驗不好的縮放和手機頁面，包括boostrap在內的眾多前端框架也無不在設計上采用這種解決方案。
要滿足這種設計，壹 先要保證一件事情就是，讓layout-viewport就是visual-viewport，消除兩個viewport帶來的頁面差異。
蘋果公司推動的的viewport meta可以解決這個問題，viewport的主要作用是定向 layout-viewport的大小。
比如：<meta name="viewport" content="width=device-width">這個設定其實就是讓layout-viewport和visual-viewport保持一致，回想一下上面那張把手機當做放大鏡的圖片，有了這個設定以后，手機就不是放大鏡了，而是把整個頁面裝在手機里。
此外，viewport還可以設置initial-scale，user-scalable
5、蘋果給的一些例子
關于Viewport，safari的開發(fā)官網(wǎng)給了一些例子，可以加深我們對這個問題的理解：
可以看到?jīng)Q定頁面展示效果的兩個因素，width和scale，scale類似pc端的放大縮小。
一個默認寬度為頁面的樣子，如下圖所示：
默認寬度 initial scale = 1.0，如下圖所示：
寬度設為320 默認 initial scale，如下圖所示：
手機瀏覽器是把頁面放在一個虛擬的窗口-viewport中的，通常情況下，這個虛擬的窗口比屏幕寬，這樣就不用吧每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局），此時雖然顯示不完全，但是用戶仍可以通過平移和縮放來看網(wǎng)頁的內容。
viewport就是讓網(wǎng)頁開發(fā)者通過其大小，動態(tài)的設置其網(wǎng)頁內容中控件元素的大小，從而使得在瀏覽器上實現(xiàn)和web網(wǎng)頁中相同的效果（比例縮?。?。
當然，更加專業(yè) 的做法是類似天貓的做法：針對手機端重新進行頁面設計、布局，因為手機屏幕畢竟有限，按照web頁面等比縮小的方式較之更 原始有改進，但是如何在小屏幕上展示更 合適的內容給用戶的設計才是更 貼切的。
不過對于一些沒有太多要求的，可以簡單的通過viewport實現(xiàn)適配。
鄭州seo公司老秦博客點評：
由于手機系統(tǒng)各異，手機的屏幕尺寸五花八門，屏幕的性能也呈現(xiàn)多樣性，還有觸摸屏和非觸屏的區(qū)分，這四個變量結合起來，會有無數(shù)種不同的情況，如何能使你的應用 地展現(xiàn)給用戶，適配固然很重要，但是，更重要的是你要在適配之前，確定應用的目標群體也很重要啦，一定要選擇適合自己的。
版權聲明：本站部分文章，由 鄭州路普科技整理發(fā)表(信息來自互聯(lián)網(wǎng),不代表本站觀點)，如有冒犯請聯(lián)系我們
