用H5開發移動端頁面的兩三事

開發語言:H5、CSS、JavaScript

開發工具:vscode

部署環境:移動端ios、android

注:本文旨在記錄下移動端開發中遇到的問題及解決方法

一.適配移動端設備

meta寫法如下:

<meta

     name="viewport"

     content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"

/>

二.製作0.5px的邊框 

利用到僞類,例如要給一個類名爲block的塊元素添加一個0.5px的邊框,給.block相對定位,僞類絕對定位,並給僞類一個1px的border,但是transform設置0.5

.block{

    position: relative;

}

.block::after {

     content: "";

     display: block;

     position: absolute;

     left: 0%;

     top: 0%;

     width: 200%;

     height: 200%;

     border: 1px solid #e8e8e8;

     transform-origin: 0 0;

     transform: scale(0.5);

}

三.在ios上滑動不流暢

在基本樣式文件中添加如下:

-webkit-overflow-scrolling: touch;

在基本樣式文件中去掉以下:

height: 100% 

四.如何在手機端調試

  • 在vscode裏安裝擴展live server,之後在vscode裏運行就會打開127.0.0.1:5500/index
  • 在終端裏輸入ifconfig得到ip地址
  • 用上一步的ip替換掉127.0.0.1
  • 手機和電腦連一個局域網,即可訪問

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章