移动端开发

移动端屏幕处理

env() CSS 函数以类似于 var() 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，需要添加一个新的视口元值：

<meta name="viewport" content="... viewport-fit=cover" />

body {
  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}

• safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left

safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。

@media screen and (orientation: portrait) {
    body {
    /* 防止页面被刘海遮住 */
    padding-top: calc(10px + constant(safe-area-inset-top));
    /* 以防万一写一个你本身适配其他手机的 */
    padding-top: 0px;
    }
}

/* 横屏底下的查询 */
@media screen and (orientation: landscape) {
    body {
    /* IOS 11支持*/
    padding-right: constant(safe-area-inset-right);
    padding-left: constant(safe-area-inset-left);
    padding-bottom: constant(safe-area-inset-bottom);
    /*IOS 11.2版本版本支持*/
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
    /* 以防万一写一个你本身适配其他手机的 */
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    }
}

移动端图片路径

在pc端可以通过获取location的地址或者相对路径去处理图片的完整路径，在移动端则显示的可能是file：//开头的图片路径，此时需要后端给出对应的前缀或者其他的方案进行最终的图片展示