在这篇文章中记录一下自己已知的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