四、移动适配
四、移動適配
文章目錄
- 四、移動適配
- 移動端適配
- viewpoint視口
- 媒體查詢
- 參考文章
移動端適配
移動端Web頁面，即常說的H5頁面、手機頁面、webview頁面；
手機設備屏幕尺寸不一，做移動端的Web頁面，需要考慮安卓/IOS的各種尺寸設備上的兼容，針對移動端設備的頁面，設計與前端實現怎樣做能更好地適配不同屏幕寬度的移動設備；
移動端適配的目的：在不同尺寸的手機設備上，頁面“相對性的達到合理的展示”或者“保持統一效果的等比縮放”；
viewpoint視口
- visual viewport：可見視口，即屏幕寬度；
- layout viewport：布局視口，即DOM寬度；
- idea viewport：理想適口，使布局視口就是可見視口；
- visual viewport = layout viewport * scale
- 獲取屏幕寬度（visual viewport）的尺寸：window. innerWidth/Height
- 獲取DOM寬度（layout viewport）的尺寸：document. documentElement. clientWidth/Height
移動設備默認的 viewport 是 layout viewport，而我們想要的是 idea viewpoint，我們通過使用 meta 標簽來實現我們想要的效果。
meta viewport 標簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。
在蘋果的規范中，meta viewport 有6個屬性：
- width：設置layout viewport 的寬度，為一個正整數，或字符串"width-device"；
- initial-scale：設置頁面的初始縮放值，為一個數字，可以帶小數；
- minimum-scale：允許用戶的最小縮放值，為一個數字，可以帶小數；
- maximum-scale：允許用戶的最大縮放值，為一個數字，可以帶小數；
- height：設置layout viewport的高度，這個屬性對我們并不重要，很少使用；
- user-scalable：是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許；
理想視口中的網頁用戶最理想的寬度，用戶進入頁面的時候不需要縮放。很明顯，所謂的理想寬度就是瀏覽器（屏幕）的寬度了。
<meta name="viewport" content="width=device-width">然而，這段代碼其實也并不完美，在IE瀏覽器中，由于橫屏豎屏的切換會對其造成影響，為了解決這個兼容性的問題，再加上一句。
<meta name="viewport" content="width=device-width,initial-scale=1">width=device-width 可以把布局視口設置成為瀏覽器（屏幕）的寬度。initial-scale=1 的意思是初始縮放的比例是1，使用它的時候，同時也會將布局視口的尺寸設置為縮放后的尺寸。
加了這行代碼，頁面的寬度就會跟要適配的設備寬度一致啦。
媒體查詢
媒體指的就是各種設備（移動設備,PC設備），查詢指的是要檢測屬于哪種設備。媒體查詢的目的是通過查詢當前設備屬于哪種設備,讓網頁能夠在不同的設備下正常的預覽。
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
我們將不同的設備劃分為不同的類型，媒體類型一共分為四類：
媒體特性用來描述設備的特點，以下是常用的媒體特性：
- width 網頁顯示區域完全等于設置的寬度
- height 網頁顯示區域完全等于設置的高度
- max-width / max-height 網頁顯示區域小于等于設置的寬度
- min-width / min-width 網頁顯示區域大于等于設置的寬度
- orientation: portrait (豎屏模式) | landscape (橫屏模式)
語法關鍵字可以將媒體類型和媒體特性鏈接到一塊,進行設備檢測。
- and 可以將多個媒體特性鏈接到一塊,相當于且
- not 排除某個媒體特性 相當于非,可以省略
- only 指定某個特定的媒體類型, 可以省略
媒體查詢的語法分為外聯式語法和內聯式語法。外聯式語法是將 media 在 head 部分引用，內聯式語法是將 media 在中引用。
- 外聯式語法：
- 內聯式語法：
一個簡單的媒體查詢實例：
<!DOCTYPE html> <html> <head><title>媒體適配</title><meta charset="utf-8"><style>div{width: 600px;height: 600px;background-color: red;}@media (max-width: 800px) {div{width: 500px;height: 500px;background-color: yellow;}}@media (max-width: 500px) {div{width: 300px;height: 300px;background-color: blue;}}</style> </head> <body><div></div> </body> </html>當屏幕寬度大于800時，顯示一個600*600的大紅塊
小于或等于800時，顯示一個500*500的黃色div。
同理，屏幕寬度小于等于500時，顯示一個300*300的藍色div
參考文章
移動端適配方案
前端移動端適配總結
響應式布局之媒體查詢功能
什么是媒體查詢?
總結
- 上一篇： 三、前端开发-CSS
- 下一篇： 使用WinSCP上传文件到指定服务器