登陆

移动开发基础

admin 2022-12-02 4人围观 ,发现0个评论

移动端常见浏览器

  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的宽度
  1. 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,解决了浏览器不一致的默认样式
      • 模块化,易用
  1. 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
请发表您的评论
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP