移动互联网终端

经常做移动端网页开发的朋友们，都应该会遇到，弹起遮罩层的交互需求，比如小点的toast提示框，modal对话框，也有满屏的提示框，或者可操作交互的弹框； 有些需求是要求在弹框上可操作，可滚动；在滚动时，就会遇到比较奇怪的兼容bug了，当你在滑动遮罩层时，下面的body页面也会跟着滚动，页面发生了“穿透”，即便你对弹出的元素设置最高级别的z-index，没什么用； 对这个坑也是研究了一端是时间，才搞定，下面给他家分享一个实测非常有用的解决方案： 大致思路，就是弹框出现时，给body设置禁止滚动（overflow:hidden）；弹框消失时，再回复该属性；直接贴代码（主要就是CSS+JS），使用方式很简单（代码可直接复制使用）， 1、先命名一个css样式属性： body.modal-open { position: fixed; width: 100%; } 2、js创建一个命名空间，用来动态给body绑定第一步设定的属性； var ModalHelper = (function (bodyCls) { var scrollTop; return { afterOpen: function () {//弹框弹出时 scrollTop = document.scrollingElement.scrollTop; document.body.classList.add(bodyCls);

浏览器兼容是从三大方面来说的，分别为html，css，javaScript这三大方面来说的。如下图: 移动端 1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。 双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接a标签 ，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转

屏幕尺寸、屏幕分辨率、屏幕像素密度 屏幕尺寸： 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。 常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。 屏幕分辨率：（iphone6 750*1334） 指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1920*1080。（这里的1像素指的是物理设备的1个像素点） 屏幕像素密度/像素密度/屏幕密度： 屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。 屏幕像素密度与屏幕尺寸和屏幕分辨率有关 相同点：1.设备厂商规定的 2.固定的 物理像素,CSS像素 设备像素/物理像素：（分辨率） 买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点， 一个点（小方格）为一个物理像素。 它是屏幕能显示的最小粒度. 设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。 每个像素可以根据操作系统设置自己的颜色和亮度。 任何设备的物理像素的数量都是固定的 CSS像素： CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。 它是为web开发者创造的，在css或者javascript中使用的一个抽象的层 一般情况下，CSS像素被称为与设备无关的像素

Retina 屏幕，设备像素比，移动端的边框在这些屏幕上1px 会表现处2px,3px像素的宽度，所以出现各种解决方案，今天只总结一种，以后慢慢补充。。通过伪类 ::after。，原理就是通过transfrom:scaleX scale scaleY这几个函数进行缩放，废话不多说，直接撸代码，分别是：底边，上边，左边，右边，还有四个边框都有，在文章末尾有相关知识的介绍链接，本文就不会浪费文字在这些方面了。 /*手机端实现真正的一像素边框*/ .border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px { position: relative; } /*线条颜色 黑色*/ .border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after { background-color: #000; } /*底边边框一像素*/ .border-bottom-1px::after { content:""; position: absolute; left: 0; bottom: 0; width: 100%;

关于移动端页面在手机调整字体大小后内容适配的问题，作为新手我也刚好是第一次遇到， 已经完成的移动端页面，正常情况下在手机上的浏览器端和App端都可以正常显示，可当测 试把手机字体调大后，布局就忽然变乱了....盒子里面的内容向内挤了。说实话，刚开始感觉 这种问题应该可以忽略，毕竟字体调大后，又可以调回原来的啊，而且大部分手机都是默认 显示标准字体吧。而且我在移动端的meta标签里已经给viewport容器添加了相应属性值， 也是用rem布局的，还会出现这种错乱的情况，我能怎么办....不过后来想了想，既然你是前 端工程师，搞技术的，就应该要学会解决技术问题啊，所以我还是打开了浏览器，开始动手 我最熟悉的骚操作Ctrl+C、Ctrl+V... 刚开始我在找是不是viewport容器里还有些属性值少添加了。 我自己原来的值是这样的： <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 感觉是正常的，因为已经调整好了设备宽度、默认缩放比、还有禁止用户手动缩放，所以应该没问题，不过我之后 还是多添加了两个属性值： <meta name="viewport" content="width=device-width,initial-scale=1.0,user

谷歌从 17 年发布 MobileNets 以来，每隔一年即对该架构进行了调整和优化。现在，开发者们对 MobileNetV3 在一次进行了改进，并将 AutoML 和其他新颖的思想融入到该移动端的深度学习框架中。谷歌发布了相关文章对升级后的 MobileNetV3 进行了讲解，雷锋网 AI 开发者将其整理编译如下。 深度学习融入到移动端的最新创意 将深度学习融合到移动端正成为人工智能领域最活跃的研究领域之一。而设计能够在移动端运行时有效执行的深度学习模型，则需要对神经网络中的许多架构范例进行更进一步的思考。 移动端的深度学习模型需要平衡复杂神经网络结构的精度和移动运行时的性能约束。在移动端深度学习领域中，计算机视觉仍然是最具挑战性的领域之一。 在 2017 年，谷歌推出了基于 TensorFlow 的计算机视觉系列模型 MobileNets。而最新的 MobileNets 架构正是于几天前发布，其中包含了一些改进移动端计算机视觉模型的有趣想法。 MobileNetV3 是该模型结构的第三个版本，它能够为许多主流的移动应用程序提供图像分析的功能。该体系结构还被集成到流行的框架中，例如：TensorFlow Lite。 MobileNet 需要尽可能维持其中发展较快的计算机视觉和深度学习领域与移动环境局限性之间平衡。因此，谷歌一直在定期对 MobileNets 架构进行更新

这里写自定义目录标题 移动端禁止长按事件触发的复制粘贴 移动端禁止手机键盘弹出的方法 移动端禁止长按事件触发的复制粘贴 页面中全部文字内容禁止长按复制的方法 CSS 写法 *{ -webkit-touch-callout:none; / 系统默认菜单被禁用 / -webkit-user-select:none; / webkit浏览器 / -khtml-user-select:none; / 早期浏览器 / -moz-user-select:none; / 火狐 / -ms-user-select:none; / IE10 / user-select:none; } 缺点：会导致input框不能用 解决方法： input{ -webkit-user-select: auto; } ** 移动端禁止手机键盘弹出的方法 ** 1.readonly 给input标签设置 readonly 属性 缺点：在iOS的Safari中无效 2.blur()方法 document.activeElement.blur() 当你的input获取焦点时 onfocus监听获取焦点事件时 调用document.activeElement.blur()方法 html : <input type="text" @focus="Focus" /> js: methods:{ Focus(){ document

如果从 13 年移动客户端大火开始算起，至今已经有五个年头了。现在移动端的形势也不需要太多的废话来描述，一句话总结就是：“浪潮退去，谁在裸泳一看就清楚。”我希望借助这篇文章来聊聊在我心目中，移动互联网下一个五年的趋势和机会，以及我们 iOS 工程师能做哪些准备，实现自我提高。本文主观性的看法比较多，文笔也比较激进，仅供参考。 我们都知道价格会受到供需的影响，如果某项技能在市场上紧缺，那么掌握这门技能的工作者工资就会相对高一些，比如 14 年前前后能写好 UITableView 就能找到一个相对不错的工作了。在我看来，未来几年的移动互联网，会出现“一个过剩，两个不足”，我会逐个分析并试着给出一些建议。 UI 工程师过剩 这一点是我老生常谈的了，首先要注意的是避免成为 API 调用工程师，因为这些 UI 方面的知识对个人价值的增长不是线性的，如果你还记得高中数学，请回忆一下 y = ln(x) 这个函数的曲线。从零到写好 UITableView 给一个工程师带来的收益，远远不是从写好 UITableView 到写好 UIStackView 能比得上的。 就以 UIStackView 为例吧，先不说它从 iOS 9 才开始支持，而要想应用不支持 iOS 9，怕是要等到猴年马月了。就说它提供的功能，虽然简化了已有场景，但这个功能完全可以通过封装已有的组件来实现，相信很多大型项目都有