移动端页面不需要在meta加_移动端适配viewport缩放方案
1. 前言
設計師交付給前端開發一張寬度為750px的視覺稿，設計稿上元素的尺寸、顏色、位置等已做過標注，要求工程師工在適配不同屏幕尺寸的設備時采用等比縮放的方案。
采用viewport縮放的方案能又快又好的實現需求。
2. 原理
在寫HTML、CSS對設計稿進行還原時不關注屏幕尺寸的差異，而是直接按設計稿的標注來開發。比如設計稿里標注的文字字號是30px，CSS里就設置文字字號30px。
頁面開發好后，在HTML的head標簽里加入 <meta name="viewport" content="width={設計稿寬度}, initial-scale={屏幕邏輯像素寬度/設計稿寬度}" > 。
舉個例子。假設設計師交付的設計稿寬度是750px，設計稿上一個標題字號標注的是32px 、margin是20px。我們以標注的大小來寫CSS。之后需要通過JavaScript計算獲取屏幕的寬度（假設需要適配邏輯像素寬度是428px的屏幕），在HTML的head里添加 <meta name="viewport" content="width=750px, initial-scale=0.57" > 即可（428/759 = 0.57）。
這段代碼的意思是：設置布局視口(layout viewport)的寬度為750px（此時頁面一般會超出屏幕），再縮放頁面（initial-scale）使其恰好撐滿屏幕。
3. 適配代碼
<!DOCTYPE html> <html> <head><meta charset="utf-8"><script>const WIDTH = 750const mobileAdapter = () => {let scale = screen.width/WIDTHlet content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`let meta = document.querySelector('meta[name=viewport]')if(!meta) {meta = document.createElement('meta')meta.setAttribute('name', 'viewport')document.head.appendChild(meta)} meta.setAttribute('content', content)}mobileAdapter()window.onorientationchange = mobileAdapter</script> </head> <body>... </body> </html>優點與缺點
- 優點： 開發流程很簡單，工程師只需根據設計稿標注還原頁面，不需要額外計算。適配范圍廣。
- 缺點： 頁面整體放大縮小，對于不想縮放的元素無法控制。比如邊框在大屏手機下顯得很粗，在小屏手機下顯得很細（下圖所示）。
我們更需要一種既能整體縮放，又能個性化控制某些元素不縮放的方案。見下篇文章：移動端動態REM方案。
下一篇：移動端動態REM適配方案?mp.weixin.qq.com4. 最后
- 如果本文對你有幫助，點個贊給作者一點小小的鼓勵讓我堅持更新
- 最近的文章為前端劍指offer系列，是面向大廠求職的文章合集，關注公眾號「 編程公子 」提前看到文章更新
總結
以上是生活随笔為你收集整理的移动端页面不需要在meta加_移动端适配viewport缩放方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 俄罗斯方块—C语言
- 下一篇： easyUI 添加CheckBox选择到