ToB企服应用市场:ToB评测及商务社交产业平台

标题: H5移动端常见问题 [打印本页]

---

作者: 慢吞云雾缓吐愁    时间: 2022-8-9 14:44
标题: H5移动端常见问题
样式问题

1、滚动条不能拖动

• 设置 touch-action
  
  
  
  • auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
    
  • none：禁止触发默认的手势操作。
    
  • pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
    
  • pan-y：可以在父级元素内进行垂直移动的手势操作。
    
  • manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持
    
  
  
• 能滚动说明外层是有滚动条直接外层加上 over-flow: hidden;
  

2、父组件修改子组件样式失败： 因为有 scoped 属性, 所以在子组件的 class 类名前添加 ::v-deep。

3、animation 动画效果:

• @keyframes name { 0% {background-position: 0 0;}100% {background-position: 0 -542px; }
  
• .class { animation: name 20s linear infinite }。
  

4、a标签跳转锚点问题 （prerender-spa-plugin优化情况下）

• 监听 locatian.href 是否包含 #, 再动态创建 a 标签模拟点击失效, 原因未知。最后还是使用了 a 标签跳转。
  
• a标签的不跳转实现的方式
  
  
  
  • href='#'; 不跳转到新页面但是会回到顶部，不推荐使用。
    
  • href='javascript:;' || href='javascript: void(0);' 当前位置不跳转。
    
  • onclick='return false' 阻止默认事件发生。
    
  
  
• 使用window.scrollTo({ left: '', top: '' });
  

5、div 自身偏移: 使用相对定位。

• 使用 position: relative; top: -20px;
  

6、过渡动画 transition: all .5s ease-in .1s;

• 需要注意 display: none; 是不会被监听到，所以没有过渡效果。
  
• 可以使用 opacity: 0; 来代替。
  

7、iphone13 pro 底部黑线遮挡问题

• 判断分辨率后：重新设置DOM高度，使用 100vh - 黑条部分高度。
  
• 也有可能是设置了固定宽度，导致字体显示失败。
  

8、1px和0.5px的问题(现代手机一般不会有这个问题)

• 查询手机端的设备像素比值 window.devicePixelRatio = 设备物理像素 / css像素。
  
  
  
  • 如果设备物理像素为 2 , 那么 1px 渲染就为 2 倍，因为最小为2px。
    
  • 使用媒体查询 设置缩放比。
    
  
  

9、animation 逐帧动画最后一帧闪烁？

• 百分比缩放问题？？？。
  
• 背景图默认 不要设置 center no-repeat。
  
• 图片尺寸要和设计图一致？ 或者使用 step-star
  

10、display: flex; 设置宽高生效需要添加两个属性

• flex-grow:0;
  
• flex-shrink:0;
  
• 这种方式也可行 flex-wrap: wrap;
  

11、iphone 使用a标签锚点不会跳转

• 只能使用 JS 事件实现 window.scrollTo({left: '', top: ''})。
  

11、position: fixed; top: 0;竟然跟顶部还有距离，上下滚动的时候图直接穿透了

• 第一种方法*{margin:0px;padding:0px;}，没点用。
  
• 第二种 样式修改 position: fixed; top: 0; => position: fixed; top: -5px; padding-top: 5px。完美解决。
  

12、苹果手机字体粗细设置失败(需要设置苹果字体)

• 加上属性就可以？？？ font-family: PingFangSC-Regular, PingFang SC;
  

13、粘性布局 position: sticky; top:50px;

• 有点像 position:fiexd; 但它是基于父容器的定位。
  
• 如果它的父容器不在滚动视图里了，那么也会消失。
  

14、requestAnimationFrame(function(){});

• 使用requestAnimationFrame代替setTimeout，减少了重排的次数，极大提高了性能，建议大家在渲染方面多使用requestAnimationFrame
  
• 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。比如，通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。
  
• 另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。
  
• 用过setTimeout实现js动画的人一定知道，在显示器的刷新频率为60Hz的时候，如果将动画的刷新频率设置为每秒刷新60次以上，会出现掉帧的问题，导致动画不连贯。
  
• 简单一点理解requestAnimationFrame，它会按照你设置的刷新频率和显示器支持的最大刷新频率之间，取较小的那个值。
  

vue

1、插件安装。更改页签头部内容。

2、安装插件等比例放大（rem）。

3、使用vantUI，插件嵌套使用方式。

4、首屏优化 SEO 优化，白屏优化。

5、package.json

1. {
2.   "name": "hello-world",
3.   "version": "0.1.0",
4.   "private": true,
5.   "scripts": {
6.     "serve": "vue-cli-service serve",
7.     "build:prod": "vue-cli-service build",
8.     "build:dev": "vue-cli-service build --mode development",
9.     "lint": "vue-cli-service lint"
10.   },
11.   "dependencies": {
12.     "amfe-flexible": "^2.2.1",
13.     "axios": "^0.27.2",
14.     "babel-plugin-import": "^1.13.0",
15.     "core-js": "^3.6.5",
16.     "fastclick": "^1.0.6",
17.     "less": "^3.12.2",
18.     "less-loader": "^6.2.0",
19.     "postcss-pxtorem": "^5.1.1",
20.     "prerender-spa-plugin": "^3.4.0",
21.     "puppeteer": "^5.2.1",
22.     "shortid": "^2.2.15",
23.     "vant": "^2.9.3",
24.     "vue": "^2.6.11",
25.     "vue-router": "^3.3.4",
26.     "vue-wechat-title": "^2.0.7"
27.   },
28.   "devDependencies": {
29.     "@vue/cli-plugin-babel": "~4.4.0",
30.     "@vue/cli-plugin-eslint": "~4.4.0",
31.     "@vue/cli-service": "~4.4.0",
32.     "babel-eslint": "^10.1.0",
33.     "eslint": "^6.7.2",
34.     "eslint-plugin-vue": "^6.2.2",
35.     "svg-sprite-loader": "^5.0.0",
36.     "vite-plugin-style-import": "^1.4.1",
37.     "vue-template-compiler": "^2.6.11"
38.   },
39.   "eslintConfig": {
40.     "root": true,
41.     "env": {
42.       "node": true
43.     },
44.     "extends": [
45.       "plugin:vue/essential",
46.       "eslint:recommended"
47.     ],
48.     "parserOptions": {
49.       "parser": "babel-eslint"
50.     },
51.     "rules": {}
52.   },
53.   "postcss": {
54.     "plugins": {
55.       "autoprefixer": {}
56.     }
57.   },
58.   "browserslist": [
59.     "> 1%",
60.     "last 2 versions",
61.     "not dead"
62.   ]
63. }

复制代码

6、vue.config.js

[code]const PrerenderSPAPlugin = require("prerender-spa-plugin");// eslint-disable-next-line no-unused-varsconst Renderer = PrerenderSPAPlugin.PuppeteerRenderer;const path = require("path");// 将传入的相对路径转换为绝对路径function resolvePath(dir) {  return path.join(__dirname, dir);}const autoprefixer = require("autoprefixer");const pxtorem = require("postcss-pxtorem");module.exports = {  outputDir: "dist",  publicPath: "/",  // publicPath: "/official-h5/",  // outputDir: 'dist/official-h5/',  configureWebpack: () => {    if (process.env.NODE_ENV !== "production") return;    let plugins = [];    plugins.push(      new PrerenderSPAPlugin({        // 生成文件的路径，也可以与webpakc打包的一致。        // 下面这句话非常重要！！！        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。        staticDir: path.join(__dirname, "dist"),        // indexPath: path.join(__dirname, 'dist/official-h5/index.html'),        // outputDir: path.join(__dirname, './'),        // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。        // routes: [        //   "/official-h5",        //   "/official-h5/about",        //   "/official-h5/wisdom-city-solution",        //   "/official-h5/wisdom-env-solution",        //   "/official-h5/wisdom-water-solution",        //   "/official-h5/wisdom-park-solution",        //   "/official-h5/wisdom-env-product",        //   "/official-h5/wisdom-water-product",        //   "/official-h5/wisdom-park-product",        //   "/official-h5/careers"        // ],        // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。        routes: [          "/",          "/about",          "/news-content",          "/productSmartWater",          "/productSmartZeroCarbon"        ],        // 这个很重要，如果没有配置这段，也不会进行预编译        renderer: new Renderer({          // inject: {          //   foo: "bar"          // },          // headless: false,          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。          renderAfterDocumentEvent: "render-event",          // headless: true,          // inject: {}        }),        // postProcess(renderedRoute) {        //   renderedRoute.html = renderedRoute.html        //     .replace(        //       /()/gi,        //       `$1/official-h5/$2$3`        //     )        //     .replace(        //       /(

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4