移动端适配的各种问题

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

移动端适配的各种问题

我是小助手 2018-07-10 15:16:46 浏览3332
展开阅读全文

适配,你懂适配吗


思考题

一个100x100,单位px的div在苹果6和苹果6p上的大小一样吗?

科普一下

  • px, 单位像素
  • dp, 物理像素
  • dpr,设备像素比
  • ppi,每英寸有多少个有用的像素

单位像素是相对单位

在同样一个设备上,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);

在不同的设备之间,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);

为什么大部分时候设计稿选择iphone6

随着苹果发布更多尺寸的大屏手机,加上Android生态中纷繁复杂的各种奇葩尺寸,移动设计全面进入“杂屏”时代。

没有别的原因,iphone6 只是中型手机的一个代表,从中间尺寸向上和向下适配的时候界面调整的幅度最小。

移动时代,我们如何做适配的呢

利用 rem 适配页面

var dc = document.documentElement;

var mt = document.createElement("meta");
mt.name = "viewport";
mt.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no";
dc.firstElementChild.appendChild(mt);

var autoSizie = function () {
    var dw = dc.clientWidth;
    var dpr = Math.min(window.devicePixelRatio, 3);
    //dw / dpr > 750 && (dw = 750 * dpr);
    window.remScale = dw / 750;
    dc.style.fontSize = 200 * (dw / 750) + "px";
    dc.dataset.dpr = dpr;
};
autoSizie();
window.addEventListener('resize', autoSizie, false);
复制代码
  • 为什么是 200 * (document.documentElement.clientWidth / 750) + "px" ?

帧动画在部分机型上抖动问题

解决方案:

1.原始尺寸做动画,再用transform:scale()做缩放处理
2.采用svg替代方案,推荐方案

利用视口单位 vw 适配页面

div {
    width: 10vw;
    height: 10vw;
    font-size: .12vw;
}
复制代码

这样的页面虽然看起来适配得很好,但是你会发现由于它是利用视口单位实现的布局,依赖于视口大小而自动缩放,无论视口过大还是过小,它也随着视口过大或者过小,失去了最大最小宽度的限制

解决方案:结合rem单位来实现布局

1.给根元素大小设置随着视口变化而变化的 vw 单位,这样就可以实现动态改变其大小。
2.限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度

如何做横屏适配

对屏幕 resize 事件进行监听,当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度

var detectOrient = function() {
  var width = document.documentElement.clientWidth,
      height =  document.documentElement.clientHeight,
      $wrapper =  document.getElementById("J_wrapper"),
      style = "";
  if( width >= height ){ // 横屏
      style += "width:" + width + "px;";  // 注意旋转后的宽高切换
      style += "height:" + height + "px;";
      style += "-webkit-transform: rotate(0); transform: rotate(0);";
      style += "-webkit-transform-origin: 0 0;";
      style += "transform-origin: 0 0;";
  }
  else{ // 竖屏
      style += "width:" + height + "px;";
      style += "height:" + width + "px;";
      style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
      // 注意旋转中点的处理
      style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  }
  $wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
复制代码

解决横屏的dom适配问题

$vw_base: 375;
$vw_fontsize: 20;
html {
  font-size: 20px; //不支持vw单位时,回退到px单位
  font-size: ($vw_fontsize / $vw_base) * 100vw;
}
@media screen and (orientation: landscape) {
  html {
    font-size: 20px;
    font-size: ($vw_fontsize / $vw_base) * 100vh;
  }
}
复制代码

网页适配 iPhoneX

viewport-fit

iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

  • contain: 可视窗口完全包含网页内容
  • cover:网页内容完全覆盖可视窗口
  • auto:默认值,跟 contain 表现一致

env() 和 constant()

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离
// 需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。
<meta name="viewport" content="width=device-width, viewport-fit=cover">
// 根据情况设置padding或者margin
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
复制代码

关于移动端适配,就说这么多了。
路漫漫其修远兮,吾将上下而求索···



原文发布时间为:2018年06月25日
原文作者:前端风云作者
本文来源:掘金 如需转载请联系原作者

网友评论

登录后评论
0/500
评论
我是小助手
+ 关注
所属云栖号: 前端那些事儿