用vue框架写的去哪儿网移动端的前端学习心得

最近在学习慕客网上的去哪网实战，才发现移动端还有自己不知道的一些细节。
1.移动端上面meta标签的设置

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    

2.移动端物理像素和逻辑像素的不同导致的一像素边框的问题
可以直接因此border.css库。上一个百度分享链接。链接：https://pan.baidu.com/s/1T_la6_fBIAI5b83UvgELnA
提取码：r76r

3.某些手机机型上面的click事件延迟300ms执行的问题。
原因：这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题—— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone这种小屏幕浏览桌面端站点的问题。这当中最出名的，当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因。当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。
解决方案：
1.禁用缩放 （chrome 和 firefox）

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

或者：
<meta name="viewport" content="width=device-width, user-scalable=no">
但是这一方案在 safari 上并不起作用，还会降低有视觉或运动障碍用户的可访问性。
2、使用指针事件 （IE10+）

微软已经针对触摸问题发布了具体的规范，例如：在你滚屏的时候 pointerup 事件并不会被触发。

这儿有一个非标准的 CSS 触摸 action 属性，它允许你移除特定元素或整个文档的触发延迟，而无需禁用缩放：

<