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

Posted 2021-03-23 -constructor

移动开发与桌面开发

---

 

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

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

---

 

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代码就是用别人提供的功能写逻辑