移动端适配主要解决的问题有:

  1. 移动端设备的自动缩放在大部分情况下都是要禁用的,主要使用meta viewport解决
  2. 移动端有许多的种类,它们的分辨率不尽相同,可以使用media媒体查询解决
  3. 移动端的屏幕与PC端屏幕有较大的差别,显示效果有很大的不同,可以使用动态REM方案解决
  4. 移动端的触发事件和PC端有很大不同

详细叙述

  1. 使用meta viewport 代码禁止用户缩放页面
<meta name="viewport" content="width=device-width, 
user-scalable=no,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"> 
  • width=device-width 意思是页面宽度等于设备宽度

  • user-scalable=no
    意思是禁止用户缩放页面

  • initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    意思是原始缩放比例,最大缩放比例,最小缩放比例都是1.0
    使用以上代码就能使得移动端用户不能自动缩放页面

  1. 媒体查询(media

  使用media查询不同条件(例如分辨率不同)下使用不同的外部样式,使得页面能够更美观。

  1. 动态REM方案

  rem指根元素(html元素)的字体大小.
动态REM方案指在js中获取页面宽度,将页面宽度与rem进行关联。然后将rempx进行关联,就能够比较方便的设置页面样式。一般设置1rem=0.1设备宽度/0.01设备宽度。需要注意的是有些浏览器或者操作系统有最小像素设置,可能会让动态REM方案失效(例:Chrome浏览器能识别的最小像素为12px)。可以使用scss自动让px转化为rem。

  1. 移动端事件的特殊性
  • 操作方式(手指操作、传感器)

  PC端使用鼠标操作,操作包含滑动、左击、右击、双击操作,操作相对来说单一,交互效果相对较少,
  手机端使用手指操作,包含点击、滑动、双击、双指放大、双指缩小、五指收缩和3Dtouch按压力度,以及配合传感器完成摇一摇、陀悬仪感应灯操作方式。

posted on 2019-04-04 15:01  +青青子衿  阅读(101)  评论(0编辑  收藏  举报