移动端中1px的分割线写法 刘海屏适配

工作中遇到的前端问题记录（第一期）

1、移动端中1px的分割线写法

iOS安卓通用解决方案

.box-border{
    position: relative;
}
.box-border:before{
    content: "";
    pointer-events: none; 
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border-radius: 8px;
    border:1px solid #999;
    -webkit-transform(scale(0.5));
    -webkit-transform-origin: 0 0;
    transform(scale(0.5));
    transform-origin: 0 0;
}

2、刘海屏适配问题

项目中经常遇到一些h5页面导航与刘海屏手机的系统状态栏发生冲突，对页面美观造成很大影响，以下分享一种简单快捷的ios适配方法。

iOS解决方案

 
//iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) and (- webkit-device-pixel-ratio: 3) {
		//写相对应的css样式，例：
		.banner {
				padding-top: 20px;
		}
}
//iphone Xs Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (- webkit-device-pixel-ratio: 3) {
}
//iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (- webkit-device-pixel-ratio: 2) {
}

安卓解决方案

h5页⾯暂时⽆法获取安卓刘海屏设备的信息(设备屏幕是否为刘海屏和刘海屏高度)，仅提供以下适配
⽅案供参考:

1. 建议页⾯在设计时给顶部留出⾜足够空间，避免页面顶部内容被刘海屏遮挡。
2. 针对指定机型适配:通过JS获取设备信息判断刘海屏设备，动态设置样式。以华为P20为例:

// 从ua里取设备信息
function getEquipmentInfo() {
    var ua = navigator.userAgent;
    var _info = ua.split(';')[2] || '';
return _info.split('Build/')[0].trim();
}
// 获取设备信息
var equimentInfo = getEquipmentInfo();
// 判断是华为P20 if(['EML-AL00','EML-DL00','EML-TL00','EML-CL00'].indexOf(equimentInfo) !== -1) {
// 动态设置样式 }

3、vue项目中引入外部字体

引入方法

1、在项目目录src/common/Font/下创建一个font.scss（或font.css）文件：

@font-face {  
   font-family: 'zidingyi';  //重命名字体名
   src: url('zidingyi.ttf');  //引入字体
   font-weight: normal;  
   font-style: normal;  
 }

2、在main.js中引入

import '@/common/css/font.scss';

3、直接在需要处使用

div {
  font-family: 'huawen';
}

不定时更新一些项目中遇到的小问题。