移动端适配

更新日期: 2020-09-15阅读: 1.9k标签: 适配

首先是名词介绍:

像素:Pixel,就是
物理像素:也就是设备像素
逻辑像素:(css像素)单位为 px
设备像素比:devicePixelRatio,(在高倍屏会出现1px变大的问题)。
css单位em:相对于当前对象内文本的字体尺寸
css单位rem: 即root em,root指的是根(html标签)


1px问题

京东商城解决方案:伪元素 + scale

  .div::after {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }

那么淘宝商城呢?border-left: 1px solid #dfdfdf;,因为阿里大大已经表示不支持石器时代的浏览器了。

其他较好解决方案:渐变的还不错。


一、像素适配

阿里flexible布局 - 版本1.x
该布局于 2017年8月9日被2.0版本取代

实现原理 假设(UI稿750px宽)

设置viewport的 scale = 1/window.devicePixelRatio

将屏幕分成10份,font-size = 实际屏幕宽度 / 10;

开发时直接填写(设计稿dom宽度)px

利用 px2rem插件 转换为 -> 实际rem

阿里flexible布局 - 版本2.x
flexible 2.x: https://github.com/amfe/lib-flexible

实现原理

利用viewport的理想视口,删除1.x版本的scale缩放

其他依旧和1.x版本一样

网易布局
个人很喜欢的布局方案

实现原理 假设(UI稿750px宽)

如低版本浏览器:

UI稿以font-size = 100px;作为参照,总宽度 = 7.5rem

(设计稿DOM对应px / 750px) * 7.5rem = 实际rem

其他屏幕按屏幕宽度百分比 缩放 font-size的值

若高版本浏览器:

1px/750px ≈ 0.1333333%

按照低版本逻辑:font-size = 0.1333333% * 100 = 13.33333vw

webpack插件postcss-px-to-viewport
顾名思义,将px转换为vw、vh、vmin、vmax
{
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 3,
    viewportUnit: 'vw',
    selectorBlackList: ['.ignore', '.hairlines'],
    minPixelValue: 1,
    mediaQuery: false
}
附:自用方案
    var initDocumentFontSize = function initDocumentFontSize() {
        var resetFontSize = function resetFontSize() {
            var bodyWidth = document.body.clientWidth;
            // UI 稿宽度 目前是 375px
            var UI_Layout_Width = 375;
            // 以100作为基数,方便计算
            var Base_Font_Size = 100;
            // 设置最宽屏幕宽度
            var Max_Layout_Width = 768;
            // 注意在最上级的section || div标签上要设置maxwidth: 768px; margin: 0 auto;
            // 得到fontSize
            var fontSize =
                bodyWidth <= Max_Layout_Width
                    ? (Base_Font_Size * bodyWidth) / UI_Layout_Width
                    : (Base_Font_Size * Max_Layout_Width) / UI_Layout_Width;
            // 如果要设置最大
            // 设置html字体大小
            document.documentElement.style.fontSize = fontSize + "px";
            // 重写body的font-size,避免未设置字体大小时,字体继承过于夸张
            document.body.style.fontSize = "12px";
        };
        resetFontSize();
        // load 窗口加载完成触发
        window.addEventListener("load", resetFontSize, false);
        // orientationchange 设备的纵横方向改变时触发。
        window.addEventListener("orientationchange", resetFontSize, false);
        // resize 窗口大小改变时触发
        window.addEventListener("resize", resetFontSize, false);
    };

    initDocumentFontSize();


二、IphoneX适配

IphoneX底部有小黑条,导致网页出现了比较尴尬的屏幕适配问题。

在IOS11中,苹果公司为了适配IphoneX对meta标签加了扩展属性viewport-fit,用来设置窗口布局。

viewport-fit 设置为cover可以网页内容完全覆盖可视窗口

H5 IphoneX适配

viewport中新增viweport-fit属性,使得页面内容完全覆盖整个窗口:

<meta name="viewport" content="width=device-width, viewport-fit=cover">

只有设置了 viewport-fit=cover,才能使用 env()。

将页面主体内容限定在安全区域内

  body {
    padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom);  /* 兼容 iOS >= 11.2 */
  }

参考:凹凸实验室


小程序 IphoneX适配

至于小程序,只能通过JS来配置。

  wx.getSystemInfo({
    success: function(res) {
      console.log(res.model)
      // 判断 model是否包含 'iPhone X'
      // 然后动态设置 bottom:68rpx
    }
  })

Safari 圆角无效BUG

在 Safari 中当元素有背景时,会出现 border-radius 不能清理背景(圆角变直角)

解决方法:

overflow: hidden;

如果方法1无效,可以再添加 border: none;

来自:https://zhongmeizhi.github.io/fed-note/css/mobile.html


链接: https://fly63.com/article/detial/9732

如何针对 iPhone X 设计网站?

在全面屏的 iPhone X 上,不需要而外的代码,Safari 可以非常完美的展示现有的网站。整个网站的内容都会自动地展示在一个“安全区域”内,并不会被四周的圆角或者“小刘海”遮挡住。

Web 端屏幕适配方案

像素 :像素是屏幕显示最小的单位。设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 iPhone5 的物理像素是 640 X 1136

移动端前端适配方案总汇

关于移动端适配的技术方案主要有以下四种:(1)通过媒体查询的方式即CSS3的meida queries(2)以天猫首页为代表的 flex 弹性布局(3)以淘宝首页为代表的 rem+viewport缩放(4)rem 方式

IphoneX底部适配

判断是否是IPhoneX手机;增加fix-iphonex-bottom样式,如果想更改IPhoneX底部34像素的背景颜色怎么办呢?增加iphone-footer-bg样式

移动端兼容适配的分析

网站适配的终端可以用js或媒体查询的方式获取,分配对应的样式。布局上采用相对单位,百分比和flex的弹性方式。对移动端的特殊性进行适配,如1px问题,默认样式等。

em与rem之间的区别以及移动设备中的rem适配方案

em与rem之间的区别:共同点:它们都是像素单位,它们都是相对单位。不同点:em大小是基于父元素的字体大小,rem大小是基于根元素(html)的字体的大小

React Native之图片/宽高/字体平台适配

为了提高代码的兼容性,我们有时需要判断当前系统的平台,然后做一些适配。比如,我们在使用 StatusBar 做导航栏的时候,在 iOS 平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏

基于Vue/React项目的移动端适配方案

本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!