300ms 延迟问题
300ms 延迟问题产生原因？
早在 2007 年初，苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题；
这当中最出名的，当属双击缩放（ double tap to zoom ），这也是会有上述 300 毫秒延迟的主要原因；
双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例，那么这和 300 毫秒延迟有什么联系呢？
假定这么一个场景： 用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作；因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕；
鉴于 iPhone 的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能；
如何解决 300ms 延迟问题？
-
方法一：禁止缩放（在 meta 标签中设置）
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>- 在 2014 年，从 Chrome32 开始 Google 已经解决这个 300ms 延迟问题，只要定义了 viewport 就不会有 300ms 延迟问题；
- 页面不可缩放，这样双击缩放功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉 300ms 的点击延迟；
- 缺点：必须完全禁用缩放来达到目的，但是通常情况下，我们还是希望能通过双指来进行缩放的；
-
方法二：使用移动端专属的触摸事件，使用触摸事件的能够提高页面响应速度，带来更好的用户体验；
点击穿透问题
点击穿透问题？
所谓事件穿透，是移动端上面一个非常有名的 Bug，其出现场景为：有两层重叠的元素，上面的元素有 touch 事件（点击后要消失），下面是一个默认会触发 click 事件的元素（a、表单元素、带 click 事件的元素），此时点击上一层的元素，下一层也同样会被点击；
如何解决点击穿透问题？
通过 e.preventDefault( ) 方法来阻止默认事件；
解决 1px 问题
什么是 1px 问题？
所谓 1px 问题，是因为设备像素和 CSS 像素并不是完全的 1:1 的关系，有可能能是 1:2 甚至是 1:3，因此我们按照以前在 PC 端的编程经验，书写 1px 可能会比实际的看着要粗一些；
1px 问题解决方案？
使用 JavaScript 计算 rem 基准值；
(function (doc, win, designWidth) {
var html = doc.documentElement; // 获取 html 根元素，一会儿要设置根元素的字体大小
function refreshRem() {
var width = html.clientWidth; // 获取 CSS 像素（设备的宽度）
if (width = designWidth) {
// 说明设备宽度都已经大于设计稿，测量出来是多少就是多少
html.style.fontSize = '100px';
} else {
// 计算比例
// 拿 iPhone6（375px） 375px/750px = 0.5 - 1/DPR
// 相当于现在每一列的宽度为 0.5px，相当于分成了 375px/0.5 = 750列
// 但是现在我们设置 font-size 为 0.5px 浏览器不允许设置这么小的，因此乘以一个 100
// 每一列的宽度就变为了 50px，375px/50 = 7.5列
// 假设设计稿量出来的是 375px->设备像素187.5px->187.5/50(每一列的宽度)->3.75(所占列数)->3.75rem
// 假设量出来是 100px -> 1列
// 100px->50px/50px->1->1rem
html.style.fontSize = 100 * (width / designWidth) + 'px';
}
}
doc.addEventListener("DOMContentLoaded", refreshRem);
})(document, window, 750);
4. 移动端 APP 有哪些类型，区别是什么？
移动端应用细分为三大类：WebApp、NativeApp 和 HybridApp
WebApp、NativeApp 和 HybridApp 三类移动应用的特点：
- Web App 指的是移动端的 Web 浏览器，其实和 PC 端的 Web 浏览器没有任何区别，只不过 Web 浏览器所依附的操作系统不再是 Windows 和 Linux 了，而是 iOS 和 Android，Web App 采用的技术主要是，传统的 HTML、JavaScript、CSS 等 Web 技术栈，当然现在 HTML5 也得到了广泛的应用。另外，Web App 所访问的页面内容都是放在服务器端的，本质上就是 Web 网页，所以天生就是跨平台的。不能在商店中下载，只能在移动设备浏览器中打开
- Native App 指的是移动端的原生应用，对于 Android 是 apk，对于 iOS 就是 ipa。Native App 是一种基于手机操作系统（iOS 和 Android），并使用原生程序编写运行的第三方应用程序，Native App 的开发，Android 使用的语言通常是 Java，iOS 使用的语言是 Objective-C。通常来说，Native App 可以提供比较好的用户体验以及性能，而且可以方便地操作手机本地资源，可在应用商店内进行下载，以 app 的形式打包
- Hybrid App，俗称混血应用，是介于 Web App 和 Native App 两者之间的一种 App 形式，Hybrid App 利用了 Web App 和 Native App 的优点，通过一个原生实现的 Native Container 展示 HTML5 的页面。更通俗的讲法可以归结为，在原生移动应用中嵌入了 Webview，然后通过该 Webview 来访问网页，HybridApp 具有维护更新简单，用户体验优异以及较好的跨平台特性，是目前主流的移动应用开发模式，可在应用商店内进行下载，以 app 的形式打开
📱 移动端常见操作
上一篇
