【VUE】-使用VUE进行移动端H5页面开发前的推荐准备工作

在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Iphone5上因为屏幕太小部分页面内容被遮挡了,影响用户正常使用和体验,当然还有一些细节需要优化,比如移动端的1像素边框问题,移动端的300毫秒点击延迟等,这些都可以进行一些优化,从而把用户体验做到更好.

1.<meta>标签内添加viewpoit,以此来动态的获取用户设备的屏幕宽度和不允许用户手动放大和缩小页面等.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--在Vue项目中的index.html页面中添加viewport,内容与我这里一致,可以直接复制粘贴,添加后打开页面按F12不报警告和错误即添加成功-->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>travel</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.添加reset.css,清除不同手机浏览器的初始样式,使各种浏览器的初始样式都保持一致.

reset.css的内容可以直接复制,然后新建并入到你的项目中

/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

img,
embed,
object,
audio,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
  text-align: left;
}

通过修改main.js import引入到你项目中

3.添加boder.css,设置1像素边框,防止移动端CSS里面写了1px，实际上看起来比1px粗的问题出现.

/*移动端1像素边框*/
@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
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
.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);
  }
}

和reset.css一样,需要在添加后,通过main.js import引入到你的项目中.

4.解决移动端点击300毫秒延迟问题

先通过命令ctrl+c 然后输入Y 终止你当前的项目.

然后在你项目的根目录下输入命令: npm install fastclick --save 敲回车耐心等待下,下载速度可能比较慢,如果你实在忍受不了这种蜗牛速度,建议你装淘宝的Node镜像,通过cnpm去下载超级快,具体的配法请自行百度,这里就不浪费篇幅了.

安装完成之后,在main.js中引入:

打开浏览器,按F12如果没有看到控制台警告及报错,即说明引入成功.

5.创建Iconfont

在进入开发中,经常会用到一些图标,比如箭头,搜索等,这些小图标无需去制作,使用阿里巴巴提供的这些图标库即可又快又好的实现酷炫的UI效果,而且页面渲染会比使用图片更快.

官网:https://www.iconfont.cn/

进入后可以注册或者关联github账号.

然后创建一个你即将开发的项目,并把项目中需要的图片都可以通过添加购物车的形式添加进该项目

然后下载压缩包->解压->拷贝iconfont.css及iconfont.css里url里指定的那些文件至你项目的assets下(推荐自己建个文件夹专门存放这些内容).

然后修改iconfont.css中的url,修改成当前项目中该文件对应的位置即可.

在main.js中引入iconfont.css,然后打开浏览器按F12测试,如果控制台无警告及错误即配置成功.

使用时只需要让其标签的class="iconfont",然后复制对应图标的代码至标签中,保存即可在页面上显示了.

<div class="header">
      <div class="header-left">
        <!--格式如下,先添加类名class="iconfont",然后再把复制到的代码粘贴至标签内-->
        <div class="iconfont back-icon">&#xe624;</div>
      </div>
      <div class="header-input">
        <span class="iconfont search-icon">&#xe638;</span>
        输入城市/景点/游玩主题
      </div>
      <div class="header-right">
        城市<span class="iconfont arrow-icon">&#xe64a;</span>
      </div>
</div>

效果:

有了这些前置的准备工作,在正式开发时会遇到更少的麻烦,特此总结一下,备用.

老汉健身

发布了89 篇原创文章 · 获赞 70 · 访问量 4万+

私信关注

【VUE】-使用VUE进行移动端H5页面开发前的推荐准备工作

猜你喜欢