mobile_5 种常见适配_设备兼容

时间 2019-11-08

标签 mobile 常见适配设备兼容栏目无线繁體版

原文原文链接

em 参照自己元素的 font-sizejavascript

rem 参照 html 根元素的 font-sizecss

1. rem 适配（同一元素，在不一样设备上，效果同样）html

适用状况：当页面大于独立像素375 时，或者页面元素不少时java

原理

页面中的元素，统一单位 rem（字体使用 px 而不使用 rem）面试

根元素字体大小设置成整个屏幕的宽（1 rem = 375px），而后元素的 css 像素根据占据屏宽，使用 rem app

// 适配 (手写 面试题)
            (function(){ /* 1. 建立 style 标签 */ var styleNode = document.createElement("style"); /* 2. 给 style 标签添加内容 (屏幕分份, 大多数公司 16 份) */ styleNode.innerHTML = "html {"+ "font-size:"+width/16+"px !important"+ "}"; /* IPhone 6 的 font-size: 23.4375px */ /* 3. 把 style 标签追加到 head 标签里 */ document.head.appendChild(styleNode); }());

缺点：需换算元素占屏幕的 rem布局

2. viewport 适配字体

适用状况：当 ui 设计图小于独立像素 375时。避免换算，直接使用 css 像素单位 pxui

缺点：图片可能失真；打破完美布局视口。spa

原理：

让布局视口等于设计图纸的 width

方案1

（直接让meta 标签中 content 的布局视口 width=320px 安卓不支持）

方案2
（放大操做 initial-scale=375/320，布局视口变小）

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
</head>




<script type="text/javascript">
    var clientWidth = document.documentElement.clientWidth;

    var targetWidth = 320;

    var scale = clientWidth/targetWidth;

    var metaNode = 
    document.querySelector("meta[name='viewport']");

    metaNode.content = "initial-scale="+scale+
                       ", user-scalable=no";
</script>

3. 百分比适配

zepto 移动端实战项目。

适用状况：页面元素少。

4. 媒体选择器（响应式布局）

不一样屏幕，自适应呈现出不一样的布局。

5. 具体像素值

适用状况：当 ui 设计图未标明宽度，以及元素的具体位置时。

关键点：

结合媒体选择器在不一样状况下，使用 2x 图和 3x 图（dpr=2时使用2x图，dpr=3时使用3x图）
元素不可直接使用 ui 设计图的标注px，必须问清楚 dpr 是多少，而后算出具体的 css 像素
- css 像素 = 物理像素 / dpr = 位图像素/dpr = 设计图px/dpr
- css 像素 = 128/2 = 64 好比 128px*128px 的图片的 css 像素应该是 64 px