移动端页面不需要在meta加_移动端适配viewport缩放方案
1. 前言
設(shè)計(jì)師交付給前端開(kāi)發(fā)一張寬度為750px的視覺(jué)稿，設(shè)計(jì)稿上元素的尺寸、顏色、位置等已做過(guò)標(biāo)注，要求工程師工在適配不同屏幕尺寸的設(shè)備時(shí)采用等比縮放的方案。
采用viewport縮放的方案能又快又好的實(shí)現(xiàn)需求。
2. 原理
在寫HTML、CSS對(duì)設(shè)計(jì)稿進(jìn)行還原時(shí)不關(guān)注屏幕尺寸的差異，而是直接按設(shè)計(jì)稿的標(biāo)注來(lái)開(kāi)發(fā)。比如設(shè)計(jì)稿里標(biāo)注的文字字號(hào)是30px，CSS里就設(shè)置文字字號(hào)30px。
頁(yè)面開(kāi)發(fā)好后，在HTML的head標(biāo)簽里加入 <meta name="viewport" content="width={設(shè)計(jì)稿寬度}, initial-scale={屏幕邏輯像素寬度/設(shè)計(jì)稿寬度}" > 。
舉個(gè)例子。假設(shè)設(shè)計(jì)師交付的設(shè)計(jì)稿寬度是750px，設(shè)計(jì)稿上一個(gè)標(biāo)題字號(hào)標(biāo)注的是32px 、margin是20px。我們以標(biāo)注的大小來(lái)寫CSS。之后需要通過(guò)JavaScript計(jì)算獲取屏幕的寬度（假設(shè)需要適配邏輯像素寬度是428px的屏幕），在HTML的head里添加 <meta name="viewport" content="width=750px, initial-scale=0.57" > 即可（428/759 = 0.57）。
這段代碼的意思是：設(shè)置布局視口(layout viewport)的寬度為750px（此時(shí)頁(yè)面一般會(huì)超出屏幕），再縮放頁(yè)面（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>優(yōu)點(diǎn)與缺點(diǎn)
- 優(yōu)點(diǎn)： 開(kāi)發(fā)流程很簡(jiǎn)單，工程師只需根據(jù)設(shè)計(jì)稿標(biāo)注還原頁(yè)面，不需要額外計(jì)算。適配范圍廣。
- 缺點(diǎn)： 頁(yè)面整體放大縮小，對(duì)于不想縮放的元素?zé)o法控制。比如邊框在大屏手機(jī)下顯得很粗，在小屏手機(jī)下顯得很細(xì)（下圖所示）。
我們更需要一種既能整體縮放，又能個(gè)性化控制某些元素不縮放的方案。見(jiàn)下篇文章：移動(dòng)端動(dòng)態(tài)REM方案。
下一篇：移動(dòng)端動(dòng)態(tài)REM適配方案?mp.weixin.qq.com4. 最后
- 如果本文對(duì)你有幫助，點(diǎn)個(gè)贊給作者一點(diǎn)小小的鼓勵(lì)讓我堅(jiān)持更新
- 最近的文章為前端劍指offer系列，是面向大廠求職的文章合集，關(guān)注公眾號(hào)「 編程公子 」提前看到文章更新
總結(jié)
以上是生活随笔為你收集整理的移动端页面不需要在meta加_移动端适配viewport缩放方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 俄罗斯方块—C语言
- 下一篇： easyUI 添加CheckBox选择到