關於畫素，解析度，viewport，裝置畫素，css畫素，Retina
做移動的響應式開發也有段時間了，但對於標題所說的一個關鍵字，並沒有每個都完全弄清楚，利用空閒時間好好做個整理（以iphone4s為例說明）。
1. 先說一下畫素的概念
畫素是度量的單位，可以理解為點。點組成線，線組成面，一個頁面也就是有n多個畫素點組成。
2. 解析度
畫素的概念和解析度分不開。我們平時都調整過電腦桌面的解析度，解析度越高，我們看到的內容會越清晰，字也會越小；解析度越小，內容越模糊，字也會越大。
什麼是解析度呢？官方的回答是：解析度是螢幕影象的精密度，是指顯示器所能顯示的畫素的多少。
iphone4s的解析度是960畫素×640畫素，即橫向能顯示640個畫素點，縱向顯示960個畫素點。
3 .PPI :是每英寸所擁有的畫素（Pixel）數目
iphone4s是3.5英寸，這個英寸為斜線的距離
那麼PPI的計算就為
4. 第二點測試
有第二點可以知道，橫向能顯示640px，那如果我的頁面上的div設定為320px的寬的話，那手機上應該顯示的是該div只佔一半的寬度，
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>測試</title>
<style type="text/css">
html {width: 320px;height: 640px;background-color:red;}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
測試結果
效果是我們320px的div在頁面中顯示了1/3的寬度，而iphone4s的寬度640px啊。
這是因為iphone預設的viewport寬度是980px，這裡新引出一個概念viewport
5.visual viewport 和layout viewport
以一段話和兩張圖來說明：
把layout viewport想像成為一張不會變更大小或者形狀的大圖。現在想像你有一個小一些的框架，你通過它來看這張大圖。（譯者：可以理解為「管中窺豹」）這個小框架的周圍被不透明的材料所環繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個圖片的時候，你可以不用管大圖，或者你可以靠近一些（放大）只看區域性。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。
visual viewport是頁面當前顯示在螢幕上的部分。使用者可以通過滾動來改變他所看到的頁面的部分，或者通過縮放來改變visual viewport的大小。因此縮放的時候visual viewport變化，layout viewport不變。無論怎樣，CSS佈局，尤其是百分比寬度，是以layout viewport做為參照系來計算的，它被認為要比visual viewport寬。
可以看出來兩個viewport都是以縱向作為衡量的，所以手機改變方向時指揮對viewport的縱向發生改變，而橫向不會改變。如下圖是螢幕橫向的測試效果。每個瀏覽器的layout viewport都不一樣，iphone4s的layout viewport為980px;(我個人理解為iphone4s的預設html的頁面大小為980px鋪滿螢幕)，android的webkit的layout viewport為800px.
度量layout viewport： document.documentElement.clientWidth， document.body.clientWidth（IE）
度量visual viewport： window.innerWidth，
6. 裝置畫素和css畫素
裝置畫素即物理畫素，就是裝置的畫素大小。如iphone4s為640px*960px
css畫素為我們設計的頁面上顯示的大小。如font-size：16px;
- 裝置沒有進行縮放的時候，1css畫素=1裝置畫素；
- 當頁面放大的時候，1css畫素會覆蓋好幾個裝置畫素；
- 同理，縮小的時候，1裝置畫素又會覆蓋好幾個css畫素。
7. Retina
Retina是蘋果提出的一個詞，其意義就是螢幕密度（PPI）很高
8 .devicePixelRatio
- window.devicePixelRatio是裝置上物理畫素和裝置獨立畫素(device-independent pixels (dips))的比例
- 非視網膜螢幕的iphone上，螢幕物理畫素320畫素，獨立畫素也是320畫素，因此，
window.devicePixelRatio等於1.
- 而對於視網膜螢幕的iphone，如iphone4s, 縱向顯示的時候，螢幕物理畫素640畫素。同樣，當用戶設定
<meta name="viewport" content="width=device-width">的時候，其視區寬度並不是640畫素，而是320畫素，這是為了有更好的閱讀體驗 – 更合適的文字大小。這樣，在視網膜螢幕的iphone上，螢幕物理畫素640畫素，獨立畫素還是320畫素，因此，window.devicePixelRatio等於2.
8. <meta name="viewport" content="width=device-width">
這個meta的意義是：將viewport的寬度定義為裝置的寬度，網頁寬度預設等於螢幕寬度，此處的viewport指的就是layout viewport。
添加了該meta標籤後，我們的測試效果如下圖：div已經平鋪滿整個x軸，而且沒有滾動條，即320px;
參考文章：
前端工程師需要明白的「畫素」
http://jianshu.io/p/af6dad66e49a
此畫素非彼畫素
http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html
自適應網頁設計（Responsive Web Design）
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
兩個viewport的故事（第二部分）
http://weizhifeng.net/viewports2.html
走向視網膜（Retina）的Web時代
http://www.w3cplus.com/css/towards-retina-web.html
視網膜New iPad與普通解析度iPad頁面的相容處理
http://www.zhangxinxu.com/wordpress/2012/10/new-pad-retina-devicepixelratio-css-page/
相關推薦
關於畫素，解析度，viewport，裝置畫素，css畫素，Retina
做移動的響應式開發也有段時間了，但對於標題所說的一個關鍵字，並沒有每個都完全弄清楚，利用空閒時間好好做個整理（以iphone4s為例說明）。 1. 先說一下畫素的概念 畫素是度量的單位，可以理解為點。點組成線，線組成面，一個頁面也就是有n多個畫素點組成。 2. 解析度 畫
畫素，css畫素，物理畫素，裝置獨立畫素，解析度大亂鬥
本文主要闡述移動端佈局中常遇到的一些基本概念，這些概念也適用於PC端，這些概念大概有：畫素（pixel），ppi，解析度，物理畫素（physical pixel）， CSS畫素，裝置獨立畫素（devicedependent pixel） 畫素 畫素是影象顯示的基本單
CG 領域專業術語（畫素，尺寸，解析度）
一、 畫素 畫素是指由影象的小方格即所謂的畫素(pixel)組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，而這些一小方格的顏色和位置就決定該影象所呈現出來的樣子。可以將畫素視為整個影象中不可分割的單位或者是元素，不可分割的意思是它不能夠再切割成更小單位抑或是元素，它是以一個
【全解析】螢幕尺寸，解析度，畫素，PPI之間到底什麼關係？for 螢幕適配
這篇文章講的是真好，連我這樣的傻子都能看懂，解決了我的好多疑惑，下面是正文 今天我給大家來講講這幾個咱們經常打交道的詞到底啥意思，以及他們之間到底有什麼關係。這篇文章是我花了一個下午從N多篇文章裡提煉出的一個白話版，保證讓你看得懂。 咱們從手機開始說起吧。先上一張
ViewPort，邏輯像素/設備獨立像素，物理像素/設備獨立像素，分辨率，CSS像素，設備像素比DPR，像素密度PPI。
詳細 到手 像素點 spa viewport src pecs 如果 you 一。相關基礎知識 小米note參數查看：http://www.mi.com/minote/specs/ 以下都以小米note這個設備為例。 1.一般說手機的幾寸是指：手機顯示屏對角線的長度。1英
60秒鏈快訊 | 即便成立新公司運營涉幣業務，百度依然可能面臨法律問題；EOS畫素遊戲塗鴉畫素最高價值約合20萬人民幣
本文由微信公眾號DappVision原創首發，轉載請聯絡授權 【海南省科技廳黨組書記國章成：火幣中國是海南招商的重要成果】 在火幣中國"連結產業，賦能實體"戰略釋出上，海南省科技廳黨組書記國章成表示，海南省響應中央號召，加強了科技人才引進和對總部經濟的扶持。火幣中國是海南
python 3.X 使用selenium破解通用一二代滑塊驗證(有原圖的)，以虎X網為列子（圖片畫素對比）
前幾天看到有位大大寫的破解極驗證碼，也就是二十滑塊驗證滑塊驗證。 本偏文章主要借鑑了其中的圖片畫素對比的方法，在原基礎上盡心的修改創作。讓本demo更適用於多個網站和一二代的滑塊驗證。 還有一個原因是原作者的demo我跑不通，邏輯出現了bug。 原作者地址：ht
響應式設計：理解設備像素，CSS像素和屏幕分辨率
rtk mos ava hdr nsq gms sco dpt nsca 概述屏幕分辨率、設備像素（device-width）和CSS像素（width）這些術語，在非常多語境下。是可互換的，但也因此easy在有差異的地方引起混淆，實際上它們是不同的概念。屏幕分辨率和設備像
解決計算機器更換網絡卡後，沒有完全解除安裝裝置管理器中舊網絡卡的問題
計算機器更換網絡卡後，裝置管理器中舊網絡卡的設定並沒有刪除掉。如果這時要給換上的新網絡卡設上舊網絡卡的IP，則系統會提示你，IP已經被分配給舊網絡卡了，不能再給新網絡卡設上相同的地址。我終於找到解決辦法了。 開啟在“裝置管理器→檢視→顯示隱藏的裝置”中，找到了那塊舊的網絡卡。這時想要
Andrid studio圖片的切換，解析度的調整
1.xml資源 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="
1975-2015年人口格網和城市建成區資料，解析度250m
使用的是歐盟的全球人居資料庫GHSL使用方法 1.網址是https://ghslsys.jrc.ec.europa.eu/index.php 共有4個時間，1975年，1990年，2000年和2014年 2.進入下載頁，你可以下載如下資料 建成區資料， 人口格網資料 https://
92-15年全球土地覆蓋LandCover資料，解析度300m
所選擇的網站是http://maps.elie.ucl.ac.be/CCI/viewer/ 可以線上檢視 找右上角下載資料按鈕，點選下載資料 選擇第一項進入 隨便填寫資訊，點選vailidate按鈕進入下載頁，就可以下載需要的資料了，還有地表反射率，水體
[轉]web串列埠除錯助手，瀏覽器控制串列埠裝置
本文轉自：https://blog.csdn.net/ldevs/article/details/39664697 開啟串列埠時查詢可用串列埠供選擇 通過javascript呼叫activex控制串列埠收發資料，可以通過輪詢每個串列埠狀態找到指定的裝置，簡化使用者操作 選擇並開啟串列埠
淺談裝置驅動的作用與本質，有無作業系統Linux裝置驅動的區別
一、驅動的作用 任何一個計算機系統的執行都是系統中軟硬體協作的結果，沒有硬體的軟體是空中樓閣，而沒有軟體的硬體則只是一堆廢鐵。硬體是底層基礎，是所有軟體得以執行的平臺，程式碼最終會落實為硬體上的組合邏輯與時序邏輯；軟體則實現了具體應用，它按照各種不同的業務需求而設計，滿足了使用
IOT-15898 scene選擇裝置動作，在編輯頁刪除裝置，再進入新增裝置動作頁面，已刪裝置依然被勾選
解決方案遍歷一遍所有本地裝置將所有分組和子專案都變成未選中裝態 ArrayList<Device> list = DeviceMange.getInstance().getAllDevices(); for (Device device : list){
ubuntu更改U盤，網盤等外部裝置自動掛載
在Ubuntu中，自動掛載除了確保/etc/fstab檔案中沒有相關裝置條目外，還要關閉gsettings的配置項，開啟關閉方法如下： 開啟終端，執行如下命令 **禁止自動掛載：** \$ gsettings set org.gnome.desktop.me
ExifInterface 獲取照片拍攝引數（ISO,光圈，解析度等）以及MediaMetadataRetriever 獲取視訊錄製引數（時長，時間，位元速率，格式）
深夜趕緊補一篇熱乎的文章。 才疏學淺，也是Google 好久才找到2個關鍵的 API。 MediaMetadataRetriever 和 ExifInterface，大佬可以直接跳過下面文章，直接去看原始碼。 一： MediaMetada
關於opencv更改攝像頭引數（幀率，解析度，曝光度……）的幾個問題
1，適用於VideoCapture開啟的攝像頭 VideoCapture capture(0); 設定攝像頭引數 不要隨意修改 capture.set(CV_CAP_PROP_FRAME_WIDTH, 1080);//寬度 capture.set(CV_CAP_PROP
js+rem動態計算font-size的大小，適配各種手機裝置
需求： 在不同的移動終端裝置中實現，UI設計稿的等比例適配。 方案： 佈局排版都用rem做單位，然後不同寬度的屏，js動態計算根節點的font-size。 假設設計稿是寬750px來做的，書寫css方便計算考慮，根節點的font-size假定為100px，得出裝置寬為7.5rem。設計稿中標註的任何px數值
linux下編譯新核心，解決無法找到eth0裝置問題，安裝eth0網絡卡驅動
由於我的blktrace執行時出現問題，只能對裝置測試一次，第二次的時候就會報如下錯誤：no such file or directory google瞭解決方案，很多都說是核心版本的問題，簡單的方法解決不了啊，測試不能不做啊，所以今天只能果斷換核心版本了（不過我想說每編一次核心，都會遇到新的