移動端（一）—— 移動端概念

移動端相關概念

之前一直在用github部落格，但是發現上傳圖檔和在别人通路的問題上很不友好，是以現在改用csdn部落格，下面正文。

個人現在在研究移動端，但是對于移動端的相關概念等等，原理性問題一直不了解，然後研究了幾天，先來說說移動端概念上的東西。

1.1 移動端（wap）與pc端有以下三個特點：

1. 系統

   pc：windows/mac（差別不大）

   移動端：ios/android/windows（有差別）

2. 浏覽器

   pc：差別很大

   移動端：差別不大

3. 分辨率（尺寸）

   pc：有差別

   移動端：差別很大

1.2 Tips:手機如何通路電腦的頁面

1. 打開cmd，輸入ipconfig回車。
2. 找到ipv4的位址，複制。
3. 在hbuilder裡面用浏覽器打開你的網頁。
4. 用剛才的IPV4的位址替換掉打開網頁的位址的前面的ip位址。
5. 複制第四步的新位址，通過二維碼生成器生成網址二維碼，手機掃碼通路。

1.3 像素的相關概念

1. 裝置獨立像素（邏輯像素，就是在控制台手機顯示上面顯示的像素）與裝置無關的邏輯像素，代表可以通過程式控制使用的虛拟像素，是一個總體概念，包括了CSS像素

   螢幕的大小，螢幕的尺寸（别名叫點，是個機關）；

   擷取：

   window.screen.width/window.screen.height

   注意：
   1. 橫豎屏切換的時候，真機裡的這個值不會變，但在模拟器裡是會切換的
   2. 在一個點裡，可以放下多個像素
   3. 這個值是可以被改變的（通過後面講的縮放）

2. 裝置像素（實體像素）裝置能控制顯示的最小機關，我們常說的1920×1080像素分辨率就是用的裝置像素機關

   螢幕分辨率（實際放的像素值），買手機的時候廠家告訴你的分辨率

   這個值是虛拟的，無法擷取

3. CSS像素（CSS Pixel）：适用于web程式設計，指的是我們在樣式代碼中使用到的邏輯像素，是一個抽象概念，實際并不存在

4. 像素比（DPR，這個值無法修改）

   縮放的比例=裝置像素/裝置獨立像素

   擷取：

   window.devicePixelRatio

   例如：iphone6

   375*667 裝置獨立像素，螢幕尺寸

   750*1334 裝置像素，螢幕分辨率

   2 像素比

   https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
              

5. PPI（像素密度，每英寸所擁有的像素數） PPI越大，越清晰，PPI在320以上為高密度，是高清屏，retina顯示屏。計算公示：

   PPI = (√(橫向pixel)^2+(縱向pixel)^2)/螢幕尺寸

   iphone6:（分辨率為1080*1920，螢幕尺寸為5.2英寸）

   PPI = (√1920^2+1080^2)/5.2

   

1.4 viewport

視口（可視區視窗），通過meta标簽設定，這個必須設定，才能會告訴浏覽器是移動端，否則浏覽器還會按照正常的寬度一般（980）顯示

• 沒有設定viewpoint的表現
  1. 螢幕的寬度一般為980，但不同的型号也會不同
  2. 真機與模拟器的值也會不同
  3. 用window.innerWidth/window.innerHeight方法擷取

• 參數設定：

  content 視口裡的相關設定

  • width： 螢幕的寬度，一般取值為device-width（預設值），即裝置的實際寬度。不建議設定為數字
  • user-scalable：是否允許縮放，yes or no
  //一般來說隻設定上面就行了，設定下面更完整，可以防止第三方軟體将文字等縮放
  • initial-scale：初始比例
  • minimum-scale：最小能夠縮放的比例
  • maximum-scale：最大能夠縮放的比例

• 注意：
  1. 如果允許縮放，就把width與user-scalable去掉
  2. 用了縮放後，并不是真正的縮放了，而是改變了螢幕的尺寸（裝置獨立像素）。

1.5 像素比

viewport裡的寬度設定成device-width後

1. 寬度不變，像素會變化

   寬度是多少在移動端頁面與pc端頁面裡是一緻的，不會變化。但是像素會變化，一個像素會變成多個像素顯示，變成的數量由像素比決定

2. 設計圖要根據裝置像素（螢幕分辨率）去定大小，至少寬度要在750以上（一般會以750的寬為基準），是以一般我們代碼設定的樣式是我們的邏輯像素，要根據設計稿的尺寸按dpr的比例進行調整。
3. 對于像素比為2以上的話，圖檔的尺寸是兩倍，正好能夠顯示高清，但是對于像素比是1的話，圖檔的體積就過大了，會浪費很多流量，并且圖檔會自動壓縮，效果還是會有一點差别（适配解決），例如750px的圖檔，在iphone6（375*667）上會顯示高清，因為dpr為2，一個像素點裡面容納兩個像素，而375個像素點就有750個像素，750px的圖檔正好對應，而375px的圖檔是750px的一半，也就是它要取圖檔的近似色來填充多出來的像素，就使得圖檔變模糊。