（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

站长

2024年08月03日 23:01 · 阅读数 51

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

❗️说明：
1. 本篇前 4 点总结出当下业内对待“移动端”项目的一个普遍做法；
2. 文中的代码可以在实际工作中复用，所以建议将代码文件分别存储至本地。

1 防止移动端页面人为放大和缩小

1️⃣打开项目根目录下的 index.html ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- ❗️在原有的 meta 标签的 content 中完善补充（添加在 initial-scale 后面）。 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>qdywxs-travel</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

注释：

width=device-width 宽度 = 设备宽度
initial-scale=1.0 初始比例 = 1
maximum-scale=1.0 最大比例 = 1
minimum-scale=1.0 最小比例 = 1
user-scalable=no 用户缩放 = 不允许

🏆这样就可以要求在移动端设备上，“用户通过手指去放大、缩小页面”的操作无效，使页面的比例始终是 1:1。

（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

2 将不同手机的初始化样式进行统一

❓在不同的手机浏览器上，默认的 CSS 样式，大多是不统一的，如何解决？ 答：我们可以引入一个 reset.css 文件，来对不同手机下页面的 CSS 样式进行“初始化”。通过重置 CSS 样式，以达到统一。

2️⃣打开 src 目录下的 assets 静态目录，删除原有的 logo.png 文件。在这里面创建一个 styles 文件夹，新建一个 reset.css 文件，文件内粘贴以下代码后保存：

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

（❗️仔细查看代码内容，其实就是对基础样式进行了修饰，以保证在所有浏览器上显示的效果基本是一致的。）

（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

3️⃣在项目的入口文件 main.js 中引入 reset.css ：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// ❗️应用 reset.css 文件，从当前的 src 目录中的 assets 下的 styles 中引入 reset.css。
import './assets/styles/reset.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

保存后，刷新网页可以看到，链接的颜色发生了变化（ reset.css 文件起了作用），控制台也没有任何异常：（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

如果我们引入过程中拼写错误（如文件名写为了 reset1.css ），那么会出现报错。可以根据报错信息，得知错误根源：（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

3 “1px border”问题

❓什么是“1px border”问题？ 答：“1px border”问题，也就是“移动端 1 像素边框”的问题。这个问题出现的原因在于：手机屏幕的分辨率高低。

比如，有的手机屏幕分辨率比较高，它是一个 2 倍或 3 倍屏幕（ iPhone5 为 2 倍屏，iPhone6 Plus 为 3 倍屏）。当在页面上写 border-bottom: 1px solid red; 来加一个“一像素的红色底边”时，这时 CSS 对应了一个物理像素高度。但实际在 2 倍屏上仔细看，就会发现它对应的不是 1 个物理像素的高度，而是 2 个物理像素。（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

为了解决这种在多倍屏中，“1 像素”会显示成“多像素”的问题，我们需要引入一个 border.css 文件。

4️⃣打开 src 目录中的 assets 下的 styles 目录，新建 border.css 文件，文件内粘贴以下代码（可另做备份，方便以后的使用）：

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
  position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
  content: "\0020";
  overflow: hidden;
  position: absolute;
}
.border::before {
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
  left: 0;
  width: 100%;
  height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
  top: 0;
  width: 1px;
  height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  border-top: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
  border-right: 1px solid #eaeaea;
  transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
  border-bottom: 1px solid #eaeaea;
  transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
  border-left: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
  right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
  bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
  left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
  /* 默认值，无需重置。 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
  .border::before {
    width: 200%;
    height: 200%;
    transform: scale(.5);
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(.5);
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(.5);
  }
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
  .border::before {
    width: 300%;
    height: 300%;
    transform: scale(.33333);
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(.33333);
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(.33333);
  }
}

仔细查看代码，可以发现，它是通过控制 CSS 中 transform 的 scale 来实现 1px 像素：（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

5️⃣同样，我们需要在 main.js 中应用（保存后，刷新页面无报错即引入正确）：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/styles/reset.css'

// ❗️引入 border.css。
import './assets/styles/border.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4 click 的 300ms 延迟问题

❓什么是 click 的 300ms 延迟？ 答：“click 的 300ms 延迟”意思是，在移动端中，点击后会有 300ms 的延迟。它指的是，在移动端开发中，某些机型上的某些浏览器上。当使用“click”事件时，触发“click”事件后，会延迟 300ms 才执行。由于它延迟了 300ms，这样就会影响用户体验。

而解决这个问题，引入 “FastClick 库”，就可以完美使用 click 事件了。

6️⃣打开终端，在项目目录下输入 npm install --save fastclick 安装：（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

（❗️ npm install 相关知识点，可见《前端高级——Node.js 与 NPM 入门：② NPM 初识》。）

7️⃣在 main.js 中引入 fastclick （保存后，没有任何报错即引入正确）：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 7️⃣-①：引入 fastclick；
import fastClick from 'fastclick'

import './assets/styles/reset.css'
import './assets/styles/border.css'

Vue.config.productionTip = false

// 7️⃣-②：使用 fastclick 自带的 attach 方法，把它绑定到 body 上。
fastClick.attach(document.body)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5 项目代码优化

完成上面的 4 件事，我们项目的初始化就基本完成。

8️⃣最后，只需删除项目中的无用代码。

8️⃣-①：打开 router 下的 index.js 文件；

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'

// ❗️删除所有 List 页面相关的代码。

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

8️⃣-②：打开 pages 目录，删除里面的 list 文件夹，并对 home 下的 Home.vue 文件进行修改；

<template>
  <div>
    <!-- ❗️删除原有内容，内容改为 hello, qdywxs. -->
    hello, qdywxs.
  </div>

</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
/* ❗️删除样式。 */
</style>

（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

项目代码进行整理后，页面内容仅显示 hello, qdywxs. ，控制台无报错：（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发

祝好，qdywxs ♥ you！

转载自:https://juejin.cn/post/7386927836847964195

（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战： 移动端“旅游网站”开发

1 防止移动端页面人为放大和缩小

2 将不同手机的初始化样式进行统一

3 “1px border”问题

4 click 的 300ms 延迟问题

5 项目代码优化

（05）Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事 | Vue.js 项目实战：移动端“旅游网站”开发