不会F12？这个方法解决移动端页面pc预览

前言

作为开发者，开发H5页面，或其他手机端网页，我们会习以为常的打开F12 调到手机模式下进行预览调试，正常情况下用户会使用手机打开该项目，所以我们不太会考虑移动端项目在PC分辨率下的内容显示

当领导要求，PC打开显示和移动端一样的效果，不压缩不伸展，居中显示，这种情况我们应该怎么做呢?

步骤

此方法基于移动端使用vue开发 rem适配

介绍方法前默认大家vue项目已搭完且已完成rem适配，要实现pc端的适配

1). 第一步创建一个js文件，并在main.js中引入

2). 第二步，我们要判断客户所处的环境为PC端还是移动端，只有在PC环境下使用我们的方法进行特殊的适配，先写一个函数检测环境

function isMobile() {
  let flag = navigator.userAgent.match(
  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  )
  return flag
}

3). 第三步，设置一个函数，动态修改我们的根节点字体大小

// 基准大小
const baseSize = 37.5 // 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px'
}

4). 第四步，初始化和窗口改变时判断环境并调用函数

// 初始化
!isMobile() && setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  !isMobile() && setRem()
}

效果：

注意：

一些交互操作，例如弹窗或引入的第三方ui组件，可能会出现位置跑偏或弹窗布满全屏，
这种情况是因为当我们在移动端开发时很多的样式100%，绝对定位这些问题，在切换到pc时窗口发生了变化，出现这种情况单独对样式做一下处理，写绝对定位时遵从规范给最近发父元素设置相对定位尽量不挂靠在body下，或设置body和界面宽度一致......针对不同的样式做不同的处理

完整代码：

function isMobile() {
  let flag = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  )
  return flag
}

// 基准大小
const baseSize = 37.5 // 注意此值要与 postcss.config.js 文件中的 rootValue保持一致

// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px'
}
// 初始化
!isMobile() && setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  !isMobile() && setRem()
}