移动如何自适应屏幕

移动开发

原文地址

1px !== 1 pixel

参见PPT41-47页
1. 设备像素： 设备屏幕的物理像素，任意设备物理像素数量固定
2. css像素 ： 为web创造的，css和js中使用的一个抽象层

实际情况中，几乎从来用不到设备像素，某些设备可以通过screen.width/height获取，但是存在严重的兼容问题

结论： 用户放大的越大，一个css像素覆盖的设备像素就越多

正常状态：

放大页面：

缩小页面：

Viewport

由于最早的手机浏览器都要考虑显示针对桌面浏览器开发的网站，所以才有了如下的区分

Desktop viewport vs Mobile viewport

参见PPT3-15页

桌面浏览器

手机浏览器

手机浏览器放大

结论： 桌面浏览器中，viewport为浏览器可视区域；手机浏览器中，viewport不等于可视区域
原因： 桌面浏览器中，放大缩小浏览器界面，会导致页面重新排列，但是由于手机的性能或出于省电这样的考虑，移动端放大缩小页面，不会导致页面重排，这就需要区分两个概念布局视图和视觉视图

Layout viewport(布局视图)

1. 页面总体区域大小
2. 如果不单独设置，则默认为980px(大部分手机)
3. 通过<meta name="viewport" content="width=320">中的width一值声明
4. js中通过document.documentElement.clientWidth获取宽度
   demo
   

Visual viewport(视觉试图)

1. 页面可见区域的大小
2. 放大缩小会对此有影响，放的越大，视觉视口就越小
3. 大部分情况无用，只在那些需要缩放的页面中需要注意
4. js中通过window.innerWidth获取宽度
   

Ideal viewport(理想视图)

1. 此为浏览器设置，用户无法更改
2. 通过<meta name="viewport" content="width=device-width">设置布局视图为理想视图的宽度
3. 常见的理想试图尺寸： iphone4/5(320px)、iphone6(375px)、iphone6plus(414px)、安卓（360px）

分辨率 和 dpr

1. 物理分辨率（DPI）：设备物理像素/设备尺寸。值越大，画面更清晰。前端用不到。
2. 设备像素比（DPR）：设备物理像素/理想视口。可以理解为一个css像素对应的物理像素数，但不是绝对的相等，比如iphone6plus，dpr为3，理想视口为414px，但实际横向物理像素1080个，小于3*414

Media query

作用： 针对特性宽度的屏幕，显示特性的css样式
例如： 在当前一般的移动页面中，都是采用rem为单位实现页面，但是如果字体也使用rem的话，导致视觉上出现在iphone5上字号过小，而在iphone6plus上字号过大的情况。

.px2px(@name, @px){
  @media screen{
    @media (max-width: 321px){
      @{name}: @px * 1px;
    }
    @media (min-width: 321px){
      @media(max-width: 400px){
        @{name}: round(@px + 1) * 1px;
      }
    }
    @media(min-width: 400px){
      @{name}: round(@px + 3) * 1px;
    }
  }
}
// 使用
.px2px(font-size, 32);

1px border

假设页面如此声明<meta name="viewport" content="width=device-width">, 此时css中的1px边框，实际上占据1*dpr的物理像素。

.border(@bdv, @w, @s, @c){
  @{bdv}: @w @s @c;
  .iosx2 &{
    @{bdv}: @w/2 @s @c;
  }
  .iosx3 &{
    @{bdv}: @w/2.8 @s @c;
  }
}

如何自适应屏幕

meta写死固定数值，采用px为单位

<meta name="viewport" content="width=750">

// css
.row {
    margin: 10px;
}

meta设定为理想视图宽度，采用百分比左右控制左右间距

<meta name="viewport" content="width=device-width">

// css
.row {
    margin: 10px 10%;
}

meta设定为理想视图宽度，采用rem为单位

<meta name="viewport" content="width=device-width">

// css
.row {
    margin: .1rem;
}

meta设定为理想视图宽度，使用flex布局，同时通过media query对不同屏幕进行适配

// html
<div class="container">
    <div class="sidebar"></div>
    <div class="content">
        <header></header>
        <section></section>
        <footer></footer>
    </div>
</div>
// css
.container {
    display: flex;
    height: 100%;
}
.sidebar{
    width: 100px;
}
.content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
header {
    .px2px(height, 20);
}
section {
    // display: flex;
    flex-grow: 1;
}
footer {
    .px2px(height, 30);
}