混合开发应用中所遇到的坑

最新推荐文章于 2021-05-30 21:03:30 发布

乐橙Web

最新推荐文章于 2021-05-30 21:03:30 发布

阅读量1.1k

点赞数

分类专栏：项目笔记文章标签：混合开发踩的坑 viewport

本文链接：https://blog.csdn.net/Mr_YanYan/article/details/80641224

版权

项目笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

2018-5-20 场景：使子元素内容垂直居中使用。父元素：display:table；子元素：display:table-cell;vertical-align:middle。table有marin,无padding;td有padding无margin，所以只能使用border来设置。但设置之后每个块之间有一道这样蓝色细线，大概代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<style>
  div{
    display:table;
  }
  p{
    width:30px;
    height:30px;
    padding:10px;
    background:red;
    border-right:10px solid lightblue;
    display: table-cell;
  }
</style>
<body>
  <div id="app">
    <p></p>
    <p></p>
    <p></p>
  </div>    
  </div>
</body>

</html>

结果样图如下
样图示例
* 2018-06-08 场景如下：由于app引用的Vue单页面，所以当跳转到某个页面时，标题肯定得变，我在beforRouteEnter里面去改写相应页面的标题。虽然标题会改变，可会出现闪动的状况，由A-B-A状态的变动变动原因：一：安卓或者IOS那边有控制标题的控件，这时候状态为A 　二：当嵌入H5页面的时候，标题又会由Vue单页面的标题的控制，未解析到Vue单页面中的JS部分状态为B　三：当解析到JS部分时，改变document.title，状态为A。

解决办法：由IOS或者Android来控制标题的改动

2018-06-08 场景：合同租约字体太小，无法放大。

解决办法：Android和IOS放开viewport缩放权限即可。

2018-06-15 判断内嵌H5网页是在app中打开还是在浏览器中打开？

场景：在app中用到微信的JSSDK来进行微信朋友圈的分享。但当打开分享按钮后，有个复制连接地址，然后用户到浏览器中打开，发现并没有分享的按钮操作。
解决办法：ios和andorid在相应头的UA上加上一段特定的UA字段，通过前端的判断，然后是否在线分享到朋友圈这个按钮

2018-07-09 移动端overflow:hidden不生效问题

解决办法(也算是一个老生常谈的问题了，记录下来，温故知新)：
一：将要隐藏滚动的内容加上一个包裹层div，然后给这个div设置高度为window.height() ，并且 overflow:hidden 就可以解决你的问题。
二:在标签body上添加如下样式。
    body {
     overflow:hidden;
     position:fixed;
     left:0;
     top:0;
    }