移动端web开发 问题

一、APP 返回按钮

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

 

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

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

 

四、div > a;点击div，能够跳转到a的地址，须要用href='javascript:void(0);' data-url='real-url' 能够避免不少坑

 

五、移动端 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;

 

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

 

七、移动端的调试：ios android。通常是在chrome上调整好就行；mac和iphone配合，也能够在真机上进行调试；android的也能够，不过本身还没试。

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