移动开发与桌面开发
手机网页开发（移动网页）
- 使用的技术是一样的
- 区别仅在屏幕尺寸和交互方式
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代码就是用别人提供的功能写逻辑