您的位置: 首页  >  文章  >  手机端网页开发兼容性指南

手机端网页开发兼容性指南

分类: 文章 • 2024-01-11 20:11:16

文章目录


毫无疑问，随着微信的崛起，移动端网页开发又进一步，需求量不断攀升。但是智能手机市场的丰富多彩，百花齐放，导致移动端的网页开发和传统的 PC 端网页开发有所不同。

很多人可能正迈向手机端网页开发，但又听说手机端网页开发有着这样或那样的问题，所以有些忐忑。

这里，博主用近年来开发手机端页面的经历，来告诉大家手机端应该注意哪些问题，同时也会讲一讲这些问题产生的原因以及解决的方法。

问题清单

  • <meta> 标签处理
  • 1px 边框问题
  • 300 毫秒点击延迟问题
  • 点透问题
  • 图片分辨率问题（@2x与@3x图）

问题详解

meta 标签处理

在 2014 年，W3C 就发布了 HTML5。现在手机端网页都是采用 HTML5 标准。当然，在一些 PC 网页，越来越多的人也采用了新的网页标准。

在开始写手机端网页时，我们会在 HTML 中写上下面的代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

关于 viewport 的细节请参考：https://www.cnblogs.com/2050/p/3877280.html

1px 边框问题

所谓的 1px 边框问题就是在 dpr 大于 1 的屏幕上，我们在 CSS 声明的 border 为 1px 所呈现出来的效果不是我们希望的 1px。

我们知道屏幕有许许多多的像素点组成，每一个像素点只可以呈现一种颜色，像素点就是颜色分配的最小单位。

手机端网页开发兼容性指南
图片来自：https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

观察上面这张图，不难发现，在同一物理尺寸大小下，我们可以划分出不同的数量的小方格。如果我们把其比为像素点，我们可以知道，在同一大小的手机屏幕上，由于工艺和材料的不同，我们可以得到不同数量像素点的屏。

同一尺寸，像素点密度越大，那么它所呈现出来的颜色越丰富，看上去也就越清晰。苹果的 Retina 屏就是一种高清屏，屏幕密度比一般安卓手机要大（不过现在安卓手机屏幕的分辨率也变大了）。

更多关于各种尺寸的单位请查看：https://blog.csdn.net/zhoulei1995/article/details/78671256

因为 CSS 中的 px 是一个相对单位，所以在 dpr 为 1 的屏幕中，它会用 1 个像素点去渲染；但在 dpr 为 2 的屏幕中，它会用 4 个像素点去渲染。而我们实际上期望在所有的屏幕中，一边框都是一个像素点去渲染的。

那么如何解决这个问题呢？

博主使用的就是 @media 媒体查询 + 伪类 + transform: scale 这种方式来实现。

border-1px($color) {
  position: relative
  &:after {
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5) 
    }
  }
}

更多 1px 解决方案：https://www.w3cplus.com/css/fix-1px-for-retina.html

300 毫秒点击延迟问题

在 PC 时代，我们用鼠标点击，即可触发一些动作。但是在智能手机时代，一切变得不同了。2007 年，首款 iPhone 发布前，工程师针对移动端大屏手机的体验做了一些优化。比如单击可以触发一个动作，双击可以触发另一个动作，如放大网页，这极大方便了用户。

那么如果判断用户是单机还是双击呢？苹果工程师相处了一个方法，用户点击时会有一个 300 毫米的延迟，之后才会触发动作。这个 300 毫秒的间隙，如果用户又点击了一次，那么可以判断用户本次的操作为双击。

可是随着移动互联网的发展，许多网页不需要双击操作，因为网页针对移动端的优化做的越来越好。如此以来，300 毫秒的设计反而在大多数场景成了一个问题。

FastClick

  • 简介
    FastClick，FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

  • 原理
    在检测到 touchend 事件的时候，FastClick 会通过 DOM 自定义事件立即触发一个模拟 click 事件的 click 事件（自定义事件），并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

更多细节参考：http://www.cnblogs.com/chaojidan/p/4517895.html

点透问题

这个问题造成的原因是：触摸事件和点击事件的时间不一致。

js 事件执行顺序：触摸事件 > 点击事件。

如 A 和 B 两个元素，且采用绝对定位，相互不包含，但是 A 在 B 的上面。假设 A 和 B 都绑定了触摸事件，那 A 元素事件触发后 A 元素隐藏，这个时候点击效果造成的触摸事件触发了，但是点击事件还没触发。

本来应该作用到 A 元素上的，但是 A 元素隐藏了，就触发到 B 元素上了。所以看上去像发生了点透事件。

图片分辨率问题（@2x与@3x图）

为什么移动端我们有 @2x 与 @3x 图之分呢？这个还是因为手机屏幕问题，有的是普通屏，有的是高清屏，这就造成了相同尺寸的屏幕像素密度不同。

这里我们需要认识一下尺寸和分辨率。

  • 尺寸：物理单位，一个绝对单位，如：米
  • 分辨率：相对单位，如：像素

先说一下手机，如 iPhone 3GS 和 iPhone 4 都是 3.5 英寸，但是前者分辨率为 320 * 480，而后者的分辨率为 640 * 960。

同样，同一尺寸的图片，其分辨率也可能不同。

主要有两种情况会造成问题：

  1. 图片的分辨率大于屏幕分辨率
  2. 图片的分辨率小于屏幕分辨率

第一种情况：由于图片的像素数目屏幕物理像素的数目，这样一来即使使用全部的物理像素也无法完整显示这张图片，因此浏览器也会经过一定的算法，将图片进行压缩，使得压缩后图片的位图像素等于物理像素。

结果：图片清晰度不会发生变化，但是会有一些色差及锐利度的减少。

第二种情况：用来显示图片的屏幕物理像素个数大于图片物理像素，那么屏幕多出的物理像素将采用填充的方法来显示图片。

结果：造成图片模糊。

更多细节参考：https://www.jianshu.com/p/0a22ccfc89c3

相关推荐