关于前端:不会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()
}