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