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