search

zhh10 / Notes

前端中react、Vue、ES6、css3、webpack、模块化等思维导图
12 stars 1 forks source link

移动端布局 #27

Open zhh10 opened 4 years ago

zhh10 commented 4 years ago

像素概念

  1. css像素(设备独立像素、逻辑像素)
    • css中使用的一个抽象的概念，单位是px
    • 值是相对的，并不是绝对的
  2. 设备像素(物理像素)
    • 屏幕的物理像素,任何设备屏幕的物理像素的数量都是固定不变的，单位是pt(点)
    • 一般指的是手机的分辨率
    • 1pt = 1/72英寸
  3. 屏幕尺寸
    • 指的是屏幕对角线的长度
    • 注意英寸是长度单位，不是面积单位
    • 1英寸 = 2.54厘米
    • 屏幕尺寸 = 屏幕斜边的像素/PPI
  4. 像素密度(PPI) 每英寸上像素(设备像素)的数量
    • PPI的密度越高，代表一定尺寸上的屏幕像素数量越多
    • 它是一个定制，是一个固定的参数
    • PPI = 屏幕斜边的像素/屏幕尺寸
    • 同一个尺寸下，PPI提高一倍，那像素会提高4倍
  5. 像素比(DPR)
    • DPR = 物理像素/CSS像素
    • 获取:window.devicePixelRatio

viewport和meta

viewport

  1. 未设置
    • 屏幕默认宽度为980，但不同型号也会不同
    • 用window.innerWidth方法获取
  2. 设置
    • width 宽度

值为一个正整数，或字符串device-width(设备宽度=css像素),不建议设置数字

viewpoet宽度 = css像素 / 缩放比

  • maximum-scale 页面最大能够缩放的比例 值为一个数字(可以带小数)
标准viewport设置
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">

移动端浏览器为了内容能够显示全，会自作主张帮我们缩放，当设置user-scalable=no就不会缩放了

当width和initial-scale同时设置，浏览器取较大的那一位

meta

禁止识别电话与邮箱(但是邮箱没效果)

手机在移动端会变成一个链接，可以拨号的，使用这个可以禁止识别

<meta name="format-detection" content="telephone=no,email=no">

搜索词

<meta name="keywords" content="北京美食，北京酒店" >

设置添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">
zhh10 commented 4 years ago

适配概念

适配的元素:

  1. 字体
  2. 宽高
  3. 间距
  4. 图像

适配方法:

  1. 百分比
  2. viewport缩放
  3. DPR缩放
  4. rem适配
  5. vw、vh适配

百分比适配

根据父级算百分比，需配合其他布局来使用

viewport缩放适配

把所有机型的css像素设置成一致的

  1. viewport需要通过js动态的设置(不能直接把device的值设置成数值)
  2. 通过设置比例(初始比例以及缩放比例)，把宽度缩放成一致的

公式：缩放比 = css像素/375

(function(){
    // 获取css像素(前提：viewport没有缩放)
    var curWidth = document.documentElement.clientWidth 
    // window.innerWidth 
    // window.screen.width 
    var targetWidth = 375 
    var scale = curWidth / targetWidth 
    var view = document.getElementById('view')
    view.content = `initial-scale=${scale},user-scalable=no,minimum-scale=${scale},maximum-scale=${scale}`
})()

问题：

  1. 没有体现大屏的优势

DPR缩放适配

把css像素缩放成与设备像素一样大的尺寸

(function(){
    var meta = document.querySelector('meta[name="viewport"]')
    var scale = 1 / window.devicePixelRatio 
    if(!meta){
        // 若用户没有写标签
        meta = document.createElement('meta')
        meta.name = 'viewport'
        meta.content = `width=device-width,initial-scale=${scale},user-scalable=no,minimum-scale=${scale},maximum-scale=${scale}`
        document.head.appendChild(meta)
    }else{
        meta.setAttribute('content', `width=device-width,initial-scale=${scale},user-scalable=no,minimum-scale=${scale},maximum-scale=${scale}`)
    }
})()