移動端開發
- 簡介
- 什么是移動端
- 前端開發種類
- 為什么要學習移動端
- PC端能直接在手機使用嘛
- 基本概念
- 螢屏尺寸
- 解析度
- 設備像素
- 設備獨立像素（css像素）
- 設備像素比（DPR）
- 像素密度（PPI）
- 視口
- 視圖分類
- 縮放比例
- 獲取視圖寬度
簡介
什么是移動端
移動端主要是指手機端，也包含部分的平板電腦等客戶聯網終端設備，
例如 1.平板 2.手機
前端開發種類
1.PC端
2.移動端
為什么要學習移動端
越來越多的人使用移動端（流量）
PC端能直接在手機使用嘛
能
a:回應式
b:重新敲一份
基本概念
螢屏尺寸
指的是螢屏對角線的長度，單位為英寸，
螢屏尺寸=螢屏斜邊的像素/PPI
解析度
是指縱橫向上的像素點數，單位是px，
設備像素
又稱 物理像素
特點：
a.越來越清晰
b.一個移動端的設備像素是固定不變的
設備獨立像素（css像素）
設備能放多少px
設備像素比（DPR）
DPR = 設備像素/設備獨立像素
像素密度（PPI）
單位面積上（英寸）像素（設備像素）的數量，它是一個定值，是一個固定的引數，
PPI=螢屏斜邊的像素/螢屏尺寸
視口
視圖分類
layout viewport 布局視口
visual viewport 可視視口
content ="width = device - width"
將布局視口的寬度設為可視視口的寬度，這樣就保證了不同手機螢屏看到的效果都很舒服
縮放比例
initial-scale=1.0
縮放比(initial-scale)=css像素(設備css像素)/viewport寬度(html寬度)
- width: device-width（設備的實際寬度–即設備的 css 像素），
- user-scalable: 是否允許用戶在設定或者默認的視口寬度上進行頁面縮放，值為no或yes，代表不允許與允許，
- initial-scale: 頁面初始縮放值，值為一個數字（可以帶小數），大于 1 表示放大，
- minimum-scale: 頁面最小能夠縮放的比例，值為一個數字（可以帶小數），
- maximum-scale: 頁面最大能夠縮放的比例，值為一個數字（可以帶小數），
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
獲取視圖寬度
a.document.documentElement.clientWidth
b.window.innerWidth
兼容性處理：
window.innerWidth || document.documentElement.clientWidth
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/279278.html
標籤：其他
下一篇：如何利用ipad隨時隨地開發代碼