移动端调试-适配

任平生_掘金
465 阅读5分钟

移动端调试方法

  • 谷歌浏览器的模拟手机调试
  • 搭建本地web服务器，手机和服务器是一个局域网内，通过手机访问服务器
  • 使用外网服务器，直接IP或域名访问

移动端基础知识

要想了解移动端开发页面的还原，搞清楚下面的词可能会对你有所帮助

屏幕尺寸： 一般说的是对角线的长度，一般用英寸来度量

分辨率：

  • 分辨率一共分为两种

    • 硬件分辨率：出厂即设好，不能更改
    • 逻辑分辨率：缩小调节的分辨率：软件驱动设置，也就是我们常设置的桌面显示缩放的分辨率

我们通常会有一个系统推荐的缩放比例，一般为120%或者150%

这个时候如何算出来缩放以后的逻辑分辨率呢

  • 拿1920*1080举例

计算公式：1920/150%=1280 此时的dpr就是1.5

这个缩小多少倍做除法，有点不好理解，我个人是没太能理解，但是我是反推的，因为放大多少倍是✖️倍数，所以缩小时应该除以，我们做适配的时候也是适配的是当下的逻辑分辨率

物理像素(渲染像素、设备分辨率、设备像素)：

  • 出厂的时候设定的真实物理像素，已经固定，也就是我们听到的某某屏幕多少多少的像素分辨率。例如iPhone6的屏幕物理像素是1334750
  • 物理像素越高，屏幕显示就越清晰(因为同样的大小下，之前在一个格子里只有一个像素点，但是现在有好多个挤压在一起，是不是就颜色变得更深了，就更加清晰了)

逻辑像素(逻辑分辨率、设备独立像素)

  • 逻辑像素的单位是PT，它是按照屏幕上内容的尺寸来计算单位，简单理解就是缩放后的分辨率，也就是假如750px的内容，基于Retina的dpr为2时显示在375的设备上，那么它的逻辑像素还是1pt，但是实质上1pt=2px。

dpr(device pixel ratio)：设备像素比=物理像素/逻辑像素 通常有1，2，3

视口(viewport)： 浏览器显示页面内容的屏幕区域，视口可分为布局视口、视觉视口和理想视口

  • 布局视口： 一般移动端设备的浏览器都默认有一个布局视口，用于解决早期PC端页面在手机上显示的问题

IOS，Androids基本上都将这个视口分辨率设置为980px，所以PC的网页大多数可以在手机查看，只不过显示的内容比较小，需要手动去缩放网页

  • 视觉视口： 也就是逻辑分辨率，用户正在看到的网站的区域，可以手动去配置，但是不会影响布局视口

  • 理想适口： 布局适口的宽度应该与理想视口的宽度一致，简单理解就是设备的宽度等于布局的视口
  • 要想了解视口，那么就需要知道网页的布局视口和逻辑分辨率是否相同

接下来我么可以做个测试，打开调试工具会发现

我们会发现网页的视口980和逻辑分辨率375是不同的，但是我们为了更好的开发，这个时候我们就需要想办法让网页的宽度和逻辑分辨率调整到一致

解决方案：html中的meta中设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
height设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

⚠️注意：我们要记得PC端也是有视口这个概念的，但是和移动端不同的是PC端的视口和分辨率一致，默认100%

二倍图：

  • 二倍图是指iPhone6/7/8的逻辑分辨率375的二倍，因为我们一般是基于iPhone6/7/8来还原移动端页面的，UI图通常是二倍图，是因为iPhone6/7/8的物理分辨率是750的，如果UI图是375的，那么显示出来就只有一半，当然我们可以使用100%的宽度来显示，虽然这样可以充满整个宽度，但是同样会让图片虚化掉。
  • 一般情况下，开发时网站以二倍图居多，移动端以2.3.4等多倍图居多

字体缩放

当我们在移动端适配的时候，会遇到一些手机的型号的逻辑分辨率较小，我们还原字体的时候通常会超过12px的限制，这个时候我们就需要使用transform: scale()来实现文字的缩放

虽然使用transform: scale()可以实现字体的缩小，但是要注意的是transform: scale()对行内元素不生效，同时在缩放过程中会缩小行内块和块元素的宽度，也就是说原本是占一行的，但是现在是占不满的

场景：

我遇到的场景是在iPhone6/7/8中还原页面后，切换到iPhone5，文字超越了12px的限制，这个时候可以结合媒体查询来实现字体缩放

解决方案：

@media only screen and (max-width:330px) {

    transform: scale(0.85);

    margin-left: -.373333rem;

}
avatar
文章
阅读
粉丝