移动wenb

• 适配问题 : 屏幕尺寸不一样
  • 解决方案 : 用百分比自适应布局(流式布局), 还需要对移动端的viewport视口进行设置
  • 流式布局的特点 : 非固定像素,内容向两侧填充
  • 视觉窗口 : viewport 移动端特有 ,看成是一个虚拟的区域, 用来承载网页 (浏览器承载viewport承载网页)
  • 适配方案的要求
  • 网页的宽度必须与浏览器保持一致
  • 默认显示的缩放比例与PC端保持一致 缩放比例 1.0
  • 不允许用户自行缩放网页
  • 适配的设置
  • viewport 适配的功能
  • 设置宽度 width = device-width 指视口的宽度等于当前设备的宽度
  • 设置高度 height = device-height 指视口的高度等于当前设备的高度
  • 设置缩放比例 initial-scale = 1.0;
  • 设置视口是否允许用户自行缩放 user-scalable = no (yes/no 1/0)
  • 设置最大缩放比例 maximum-scale= 1.0;
  • 设置最小缩放比例 maximum-scale= 1.0;