移动端适配 /移动开发与桌面开发

适配（为了加上mate标签后实现等比）

什么是适配？页面在不同设备上等比展示

适配的目的：百分百还原设计图

rem适配的原理：改变了一个元素在不同设备上占据的css像素的个数

移动开发与桌面开发

手机网页开发（移动网页）

使用的技术是一样的
区别仅在屏幕尺寸和交互方式

1.设置viewport

mate标签（元数据）是数据的数据信息

  <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
//写在head标签内

viewport是html的父元素

下面语句设置它的尺寸

<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0
user-scalable=no">

//width=device-width 宽度等于设备宽度
//height=device-height 高度等于设备高度
//initial-scale 初始缩放比例
//maximum-scale 允许用户缩放最大比例
//minimum-scale 允许用户缩放最小比例
//user-scalable  是否允许用户缩放

2.调试页面

chrom开发者工具调试手机页面 //浏览器兼容问题最终还是要手机看一下

标签和css有一些兼容性问题网站caniuse 网站查阅

3.媒体查询/响应式设计

定义：根据分辨率不同选择不同的样式

主要作用：

监测媒体类型，比如 screen，tv等
监测布局视口的特性，比如视口的宽高分辨率等

用法

//用在style标签内部

@media all // 所有媒体类型，tv，手机，打印机 
and  //逻辑操作
(min-width: 200px) and (max-width: 300px) {
body {}
}

缺点：很多重复的css

Hxbrid app（混合开发）

混合开发基础：

写的网页运行在手机程序中。本来网页提供的功能是有限的。

但是应用程序可以给页面添加函数

在这种情况下，js就可以调用别人提供的功能

例子：

比如js不能实现手机震动

ios 安卓可以让手机震动

ios写一个object C 让手机震动，并且暴露出去

把这个东西注册为网页的一个js函数

js调用这个js函数手机就震动

js函数调用object C 让手机震动

总结：看上去是js让手机震动，只要把api提供给js

js代码就是用别人提供的功能写逻辑

技术总结

em

em相对自身的fontsize 比如浏览器fontsize = 16px

  <style>
    article {
      font-size: 20px;
      width: 10em;
      height: 10em;
      background: lightskyblue;
    }
  </style>   // current  200*200px

  <style>
    article {
      width: 10em;
      height: 10em;
      background: lightskyblue;
    }
  </style>   // current  160*160px

1.rem相当于html根标签的fontsize

任何设备1rem = html 标签下 fontsize值

rem方案适配

要求：相同元素在不同设备上的等比展示

rem适配原理：改变一个元素在不同设备上占据的css像素的个数

优点：有完美视口//没有破坏完美视口

缺点： px值到rem的转换复杂

var styleNode = document.createElement("style")
var w = document.documentElement.clientWidth/16
styleNode.innerHtml = "html{font-size:"+w+"px !important}"  //
document.head.appendChild(styleNode)

2.viewport适配原理

每一个元素在不同设备上占据的css像素个数是一样的。但css像素和

物理像素的比例是不一样，等比的

优点：所量即所得

缺点：没有使用完美视口

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

<script>
(function() {
 var targetW = 750
 var scale = document.documentElement.clientWidth/targetW
 var meta = document.querySelector("meta[name='viewport']")  //此处选择器未证实
 meta.content=“intial-scale”+scale+",minimum-scale" +scale+
",maximum-scale="+scale+",user-scalable=no"  
})()

3.百分比适配，比较简单页面可以用(首选方案)

4.不适配，做流媒体

原理总结

三个视口

布局视口：决定网页的布局，要不要换行，整个视口能放下多大网页//与设备没关系

视觉视口：用户能看到什么「决定了物理像素与css像素的比例，一个视觉视口占据的物理像素永远是750，可一个视觉视口中的css像素个数与用户缩放有关」

作用：维护了物理像素与css像素的比例。面积上的比例

理想视口：加上meta标签才有意义布局视口与视觉视口一样

meta name=""viewport" content="width=device-width, initail-scale=1.0"

写一个是理想视口两个都写是完美视口

完美适口作用：

完美视口让我们的布局视口变成理想视口

当有一个元素超出布局视口，视图视口，会出现滚动（与视觉视口有关）

width=device-width只改变布局视口（布局视口谁大听谁的）

initail-scale=1.0两个都变

四个像素

物理像素：就是分辨率（物理分辨率）设备成像的最小单元

设备独立像素：计算机坐标系统中得一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素也是设备提供出的一个接口（对接css像素）

css像素：抽象的 web开发中的最小单元

位图像素：图片的最小单元

像素比DPR：物理像素与设备的独立像素

//由于物理像素，设备独立像素，像素比都是设备的概念与浏览器无关，出场就确定了

与浏览器无关，在web开发中无意义

meta width = device-width

1个css像素 = 4个物理像素（iphone6）

获取视口：

document.documentElement.clientWidth  // layout没有兼容性问题。可见区域宽度，视图视口。眼睛能看到的

尺寸：便是包含内部css像素的个数

用户缩放：移动端布局视口不变（pc端会变）

系统缩放：布局视口和视觉视口都变（参照理想视口缩放）

vue单文件组件中设置meta标签的viewport

 npm install vue-meta --save

import Meta from 'vue-meta'
 
Vue.use(Meta)

在单个Vue页面中设置meta信息
 export default {
    name: 'DealRepair',
    metaInfo: {
      title: 'This is the test',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' }
      ]
    },
    data () {
      return {
 
      }
    },
    mounted(){
    },
    methods:{
    
    }
}

posted @ 2019-12-14 17:47 容忍君阅读(645) 评论(0) 收藏举报

刷新页面返回顶部

容忍君