移动开发基础

移动端常见浏览器

1. UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360浏览器、谷歌浏览器等......
2. 兼容移动端主流浏览器，处理Webkit内核浏览器即可
3. 使用-webkit-前缀解决兼容问题

移动端屏幕尺寸

1. 开发尺寸（px）：屏幕的分辨率，以及物理像素比（DPR）
2. 参考网址：[material.io/devices/]
3. 设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值
4. 注意： 作为前端开发，不需要纠结dp、dpi、pt、ppi等单位

移动端调试方法：

1. Chrome DevTools来模拟手机进行调试
2. 搭建本地Web服务器，通过手机访问来进行调试
3. 使用外网服务器，通过手机访问来进行调试

总结：

1. 移动端浏览器主要对webkit内核进行兼容
2. 移动端开发主要针对手机端开发
3. 移动端开发关注设备开发尺寸
4. 学会谷歌浏览器模拟手机界面及调试

视口（viewport）

1. 视口（viewport）
   • 浏览器显示页面内容的屏幕区域
2. 布局视口（layout viewport）
   • 移动设备的浏览器默认设置了一个布局视口，用于解决PC端页面在手机上显示的问题
   • 布局视口分辨率一般为980px，手机端一般小于这个分辨率，PC端页面以980px来适应在手机上的显示，所以PC端页面在手机上显示很小，一般默认可以通过手动来缩放网页
   • 即：页面以980px显示的区域
3. 视觉视口（visual viewport）
   • 用户正在看到的 网页的区域
   • 可以通过缩放操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度（980px）
   • 即：浏览器显示的区域，980px的内容要全部显示在视觉视口中，除非缩放
4. 理想视口（ideal viewport）

• 使页面在移动端有最理想的浏览和阅读宽度
  • 使用meta视口标签来实现
  • meta视口标签的主要目的：布局视口的宽度应该与视觉视口的宽度一致，即：设备有多宽，布局视口就要有多宽
  • 即：理想视口中布局视口和视觉视口相同，而非980px的宽度

5. meta视口标签：
   • 写法：

   <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> 复制代码

   VSCode自动生成的也可以
   • 含义：
     • width：视口宽度
     • initial-scale：初始缩放比，大于0的数字
     • maximum-scale：最大缩放比，大于0的数字
     • minimum-scale：最小缩放比，大于0的数字
     • user-scalable：用户是否可以缩放，yes/no、1/0

物理像素和物理像素比:

1. 物理像素点就是设备的像素点个数，这是设备出厂后就固定不变的
2. 物理像素比：网页开发用的1个px能装几个物理像素点，例如，我一个px点可以装一个物理像素点那物理像素比为1，如果一个px点可以放2个物理像素点那么物理像素比为2。设备尺寸：开发尺寸=物理像素比
3. 多倍图主要是为了解决移动端图片不清晰的问题，方法是采用高分辨率的图片，在开发时再缩放到需要的尺寸。

二倍图

使用倍图提高图片质量：解决图片在高清设备中模糊的问题，常用的是二倍图

1. 实质：
   • 图片显示大小根据分辨率来设置
   • 图片实际大小根据物理像素点来制作
2. 插入图/背景图：
   • 背景图和插入图使用同样的方式进行处理：利用倍图解决模糊问题
   • 插入图使用width、height来控制倍图大小
   • 背景图使用background-size属性来控制背景倍图大小，其值类似width和height，设置的是显示大小，如：background-size: 50px 50px;，一般只设置一个值，另一个值设置为auto
3. 注意事项：
   • 设计时会根据物理像素进行设计，然后导出相应尺寸的倍图
   • 前端需要根据分辨率（开发尺寸）正确设置倍图大小

移动端开发选择

• 移动端主流方案：
  • 单独制作移动端页面（主流）
    • 适合比复杂的网站
  • 响应式页面兼容移动端（其次）
    • 适合比简单的网站
    • 缺点：制作麻烦，需要调试兼容性问题

移动端常见问题解决方案

1. 浏览器兼容性：
   • 移动端浏览器以webkit内核为主，只需考虑webkit兼容性问题
   • 可放心使用HTML5和CSS3
   • webkit内核私有前缀：-webkit-
2. CSS初始化：

• normalize.css：
  • 让不同的浏览器渲染的网页元素形式更统一
  • 优点：
    • 保留了有价值的默认值
    • 修复了浏览器bug，解决了浏览器不一致的默认样式
    • 模块化，易用

3. CSS3盒模型：box-sizing

• 传统盒模型：外扩
  • 属性值：content-box
  • 盒子的宽度 = CSS中设置的width + border + padding
• CSS3新增盒模型：内减
  • 属性值：border-box
  • 盒子的宽度 = CSS中设置的width，此width包括了padding和border
  • border和padding不会撑大盒子
• 盒模型选择：
  • 移动端全部使用border-box
  • PC端不考虑兼容也可以使用border-box
• 特殊样式

/* CSS3盒模型 */ -webkit-box-sizing: border-box; box-sizing: border-box;  /* 清除：点击高亮 */ -webkit-tap-highlight-color: transparent;  /* iOS上给按钮和输入框添加自定义样式时，需要额外增加这个属性 */ -webkit-appearance: none;  /* 禁用长按时的弹出菜单 */ img, a {     -webkit-touch-allout: none; } 复制代码

移动端技术选型

• 移动端布局：
  • 单独制作移动端页面（主流）
    • 流式布局（百分比布局）
    • flex弹性布局（推荐使用）
    • Less+rem+媒体查询布局
  • 混合布局
  • 响应式页面兼容移动端（其次）
    • 媒体查询
    • Bootstrap