在这篇文章中记录一下自己已知的HTML5移动端与PC端的差异

在移动端中

  • 伪类:hover的表现比较奇怪,点击之后效果不会消失

    移动端并没有鼠标,也没有:hover存在的必要,响应式页面可以通过media query区别PC和移动端来按需添加:hover效果

  • click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有click,就会进行放大缩小。

    为了解决这个问题,有不同的方案:

    但即便如此,在某些业务场景中还是不够方便的,因此诞生了许多手势库,如
    Hammer.js 支持drag,swipe,hold,doubleTap等手势

  • 在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但在移动端,CSS的1px等于几个物理像素是和屏幕像素密度有关的。
    比如从iPhone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。
    详细请见 -> 移动前端开发之viewport,devicePixelRatio的深入理解

    我们常在移动端开发的时候在HTML开头添加这个meta标签来解决这个问题
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    其中

    width=device-width :表示宽度是设备屏幕的宽度
    initial-scale=1.0:表示初始的缩放比例,1.0就是占网页的100%
    minimum-scale=1.0:表示最小的缩放比例
    maximum-scale=1.0:表示最大的缩放比例
    user-scalable=no:表示用户是否可以调整缩放比例

参考链接:
1.https://www.cnblogs.com/freefly-an/p/8665451.html
2.https://www.jianshu.com/p/413a25b2c503