移动web——day3—上

权泉全
123 阅读4分钟

一、移动端特点

1.结论

  • PC端屏幕大，网页内容需要固定到一个版心当中，然后在浏览器中居中显示；
  • 移动端手机屏幕小，网页宽度多数为100%，不需要版心控制；
  • 手机屏幕尺寸大小不一，移动端布局的难点在同一套代码能够在不同尺寸的屏幕上合理展示；

2.分辨率

  • 物理分辨率、逻辑分辨率的区别, 以及物理像素比的关系？
  • image.png

物理分辨率

  • 是硬件所支持的分辨率；
  • 物理分辨率是生产屏幕时就固定的，它是不可被改变的；
  • 如上图中, 显示器分辨率推荐的2560X1440就是该显示器的物理分辨率；

逻辑分辨率

  • 通过软件可以达到的分辨率；
  • 逻辑分辨率是由软件（驱动）决定的；
  • 如上图中, 缩放与布局里可设置的百分比或直接修改显示器分辨率 都是修改本身显示器的分辨率, 使其变为逻辑分辨率；

制作网页参考物理分辨率还是逻辑分辨率？

  • 可通过修改不同的分辨率, 对同一个网页的html进行宽度查看；
  • 如随着分辨率的修改或百分比的修改, html标签的宽度固定是显示器的推荐分辨率, 则是参考物理分辨率；
  • 如随着分辨率的修改或百分比的修改, html标签的宽度在随之变化, 则是参考逻辑分辨率；
  • CSS样式代码中使用的就是基于逻辑分辨率的 逻辑像素

设备像素比

  • 设备像素比(DPI) 指的是设备物理像素和逻辑像素的比例, 定义了物理像素和逻辑像素之间的关系；
  • 例如: iPhone6/7/8的物理分辨率是750*1334, 逻辑分辨率则是375 * 667, 两者得到dpi是2倍的dpi关系

视网膜屏技术

  • Retina屏幕（视网膜屏；
  • 可理解为视网膜屏技术会将更多的物理像素点压缩到一块屏幕里，提高屏幕显示的高清程度；
  • 在视网膜屏里，1逻辑像素(1px)由多个物理像素来显示；

基于iPhone6/7/8为基础的简单理解：

  • 物理像素中(物理分辨率)；
  • 我们将1px看成一个房间, 一个房间中有1个灯泡亮着；
  • 逻辑像素中：
  • 我们也把1px看做一个房间, 因为设备像素比的关系, 宽和高都被压缩, 这个房间中有4个灯泡亮着, 此时房间就会被照的更亮 (2X2)；
  • 如果设备像素比为3 (3X3)；iPhone11 pro以上的机型设备像素比就为3, 代表手机的显示效果看着更清晰；

3.多倍图

场景：

  • 在应用了视网膜屏的iPhone6/7/8设备上；
  • 已知iPhone6/7/8的设备像素比为2；
  • 想要展示一张CSS像素为 50 x 50 PX的图片, 用CSS定义了 50 x 50 PX 的大小, 在手机上真正显示出来的物理像素却是为 100 x 100 PX 的效果；
  • 造成图片被放大会模糊的问题；

解决方案

  1. 使用一张原本大小为100 x 100 PX的图片；
  2. 手动设置为 50 x 50 PX；
  3. 在手机上显示出来的物理像素为100 x 100 PX；
  • 此时不会造成图片模糊；因为图片只是还原到原本的大小；这种先手动缩小再还原的方案称之为多倍图技术, 因设备像素比不同, 也有二倍图, 三倍图的叫法；

image.png

4.视口

基本概念：

  • viewport[视口]；
  • 视口：显示HTML网页的区域，用来约束HTML尺寸；
  • 移动端默认的网页宽度是980px (完全干净的html页面时)；
  • image.png
  • 网页的宽度和逻辑分辨率不相同, 导致书写页面时不方便；

如何让网页宽度和设备宽度(分辨率)相同

  1. 添加视口标签；
  2. 使用meta标签设置视口宽度，制作适配不同设备宽度的网页
  • meta标签是位于head标签里的一个辅助性标签；
  • 用于辅助描述页面的相关信息；
  1. 生成html骨架结构时, 会自动生成视口代码； - <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 代码解读：
  • width=device-width ：宽度 = 设备-宽度=> HTML页面的宽度等于用户当前设备的宽度；达到适配不同设备宽度网页的效果；
  • initial-scale=1.0 ： 初始 - 比例 = 1.0
  1. 移动端完整视口代码
 <meta name="viewport"
        content="
        width=device-width, 
        initial-scale=1 
        minimum-scale=1 
        maximum-scale=1 
        user-scalable=no" 
    />
    <!-- Html视口(viewport)： -->
    <!-- width=device-width： 页面宽度等于设备宽度 -->
    <!-- initial-scale=1：    初始缩放级别 -->
    <!-- minimum-scale=1：    最小的缩放级别 -->
    <!-- maximum-scale=1：    最大的缩放级别 -->
    <!-- user-scalable=no:    禁止用户手动缩放 -->
  • 以后书写移动端页面时, 记得先完善meta视口代码；
  • 防止用户用手指触摸页面时, 误操作把页面放大, 降低用户体验；
avatar
文章
阅读
粉丝