移动端web开发问题

1、APP 返回按钮

<a href='#' onclick='javascript:history.back(-1);'></a> 返回有问题
需要使用 href='javascript:void(0)' 去掉<a>的默认行为

2、获取页面的高度使用window.innerHeight;

之前使用的window.screen.height是设备分辨率的高度，而window.innerHeight是网页在当前窗口中可见部分的高度。

4、div > a;点击div，可以跳转到a的地址，需要用href='javascript:void(0);' data-url='real-url' 可以避免很多坑

5、移动端 h1高度异常

现象：做移动端的页面，使用h1，高度异常

原因：一般会设置html font-size:100px; 而h1默认的font-size:2em, 所以高度异常

办法：设置html font-size:initial

<div class='test'>

    <h1>

      <img src="../images/page5-circle.png" alt='' />

      <span>123</span>

      <img src="../images/page5-circle.png" alt='' />

    </h1>

  </div>

body{

      margin: 0;

    }

    .test{

      background-color: steelblue;

    }

    .test h1{

      font-size: initial;

    }

    .test span{

      font-size: .24rem;

    }

移动端高度异常都是因为设置了html fontsize:100px;

6、美国大选的界面，max-width: 750px; img max-width=750px; 一定程度上适配了移动端。　　

7、移动端的调试：ios android。一般是在chrome上调整好就行；mac和iphone配合，也可以在真机上进行调试；android的也可以，不过自己还没试。

这个github项目特别好：https://github.com/jieyou/remote_inspect_web_on_real_device

巴特西

移动端web开发问题

最新文章

热门文章

巴特西

移动端web开发 问题

最新文章

热门文章

移动端web开发问题