站点工具

用户工具


移动端适配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 = 750
    const mobileAdapter = () => {
      let scale = screen.width/WIDTH
      let 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方案。

https://link.zhihu.com/?target=https%3A//mp.weixin.qq.com/s/RYabh9yLbURqtC0MSnMtlg

  • 如果本文对你有帮助,点个赞给作者一点小小的鼓励让我坚持更新
  • 最近的文章为前端剑指offer系列,是面向大厂求职的文章合集,关注公众号「 编程公子 」提前看到文章更新

饥人谷一直致力于培养有灵魂的编程者,打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实,他们以饥人谷为起点,足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程:加微信 xiedaimala03,官网:https://jirengu.com

若愚 · 2023/02/08 19:11 · 移动端适配viewport缩放方案.txt