不同的手机屏幕,开发小程序的过程中需要注意哪些适配问题?

2019-12-05 03:00:03

  随着我们用到的小程序的种类增多,因此促进了小程序的开发,在开发过程中最重要的一个问题就是适配,那么不同的手机屏幕,开发小程序的过程中需要注意哪些适配问题?

  小程序开发屏幕适配问题
  1、先拿设计稿竖着的横向分辨率除以100得到body元素的宽度:
  如果设计稿基于iphone6,横向分辨率为750,body的width为750 / 100 = 7.5rem如果设计稿基于iphone4/5,横向分辨率为640,body的width为640 / 100 = 6.4rem
  2、布局时,设计图标注的尺寸除以100得到css中的尺寸
  3、在dom ready以后,通过以下代码设置html的font-size:
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4(如果是750的设计稿,应该除以7.5) + 'px';
  4、font-size可能需要额外的媒介查询,并且font-size不能使用rem
  5、当deviceWidth大于设计稿的横向分辨率时,html的font-size始终等于横向分辨率/body元素宽:
  增加一个判断来判断当前视口的宽度
  var deviceWidth = document.documentElement.clientWidth;if(deviceWidth > 640) deviceWidth = 640;document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

  小程序开发中遇到的适配问题解决办法
  转换函数:
  在判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的 字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的 测试。这一过程将持续到发现非有效数字的字符为止,此时parseInt()将把该字符之前的字符串转换成数字。

  微信小程序该如何适配各个机型屏幕
  我们知道在原始设备中, iOS有pt,安卓有dp(密度无关像素), 但是无论在原生开发语言还是在React-native中,我们处理屏幕适配, 都可以采用动态获取当前屏幕的方式计算比例, 动态设置真实的margin间距值。
  以当前流行的iPhone 11 屏幕来说, 设计一般会基于这个屏幕尺寸来给出设计稿 (375*667)
  当在不同的设备上时,(5s/6sp/7/x等), 我们通过获取当前设备的真实屏幕pt (RealScreenW/RealScreenH)
  RealScreenW/375 = > presentW
  RealScreenH/667 = > presentH
  我们获取了通用的比例值,
  let w = 20 * presentW;
  let h = 40 * presentH;
  以上,就获得了当前设备上应该设置margin / 宽高等数值.
  或者调用通用函数的方式:
  getW(w){
  return presentW * w
  }
  getH(h){
  return presentH * h
  }
  总之, 原生中可以采用以上方式来动态适配, 当然还有其他方法, 这只是其中一种。

  关于不同的手机屏幕,开发小程序的过程中需要注意哪些适配问题?现在大家应该有所了解了吧,适配问题非常重要,解决不好的话会面临失败的危险。

在线咨询
联系电话

13671383052