移动端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