開發語言: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
- 手機和電腦連一個局域網,即可訪問