移动互联网终端

滚动穿透问题 滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案，但有些还是存在一定的问题： https://gitlwz.github.io/2018/05/02/vue-move/ 设置overflow为hidden 1 2 3 4 5 6 .modal-open { &, body { overflow : hidden; height : 100% } } 即当弹出层弹出时在html上添加.modal-open,禁用 html 和 body 的滚动条,但实际用上就会发现： 由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来计算原来滚动的位置，在弹出时保持滚动位置； js ֮ touchmove + preventDefault 1 2 3 modal.addEventListener( 'touchmove' , function (e) { e.preventDefault(); }, false ); 最后解决方案：position: fixed 1 2 3 4 body .modal-open { position : fixed; width : 100% ; } 这种方式同样当弹出层弹出时滚动条会丢失，所以还需要使用js来保存滚动条的位置

之前有客户反馈，经常会收到客户端断开连接的提醒。影响聊天，希望能查下问题。开始我以为是用户网络波动，导致的连接断开，后来同事跟我反馈，网络正常的时候也会出现断开连接的现象，希望我查下服务器是否配置了什么，会话保持时长之类的参数。 这个问题在c++端比较容易重现，在web端偶现，移动端却没发生过。难道是移动端一直没用户使用，所以他们也不知道？额，不能这样想，不然容易被打。一定是有人用的，可能移动端有啥不为人知的厉害操作？ 由于这个涉及的角色只有两个，server端和client端，至少目前来说，已经有两种client端都出现了问题，难道这俩端都写的有问题么？额，有一个是我写的，没弄清楚之前，不能怂。先从服务器端查起，检查相关配置，并没有发现有类似保持连接时间的配置，额。。。这就尴尬了。客户端也没有写超时自动断开的逻辑啊？几个人下午排查了半天，一直没发现问题到底是怎么回事儿。只能采用最笨的方法-抓包，然后请我们的好朋友wireshark分析下。同事在服务器端和客户端同时抓包，可是有时候就是这样，你越希望它重现，它反而越不出现。懊恼。。。 下班之前，CTO问查的如何了。大眼瞪小眼，不敢定结论。 他说他看下，第二天中午，cto拉我们去说这个问题，他找到原因了。 他给我们看异常断开连接前的包，发现断开连接之前会发两个包，每个包间隔是2s,上一条消息的间隔时间是20s,多次异常断开都是如此

首先说一下，为何要用重置样式 除了省心之外，还有两个好处 1.方便设计师/程序员发挥 白纸的感觉确实好。各种margin，padding，border的为0。。。 2. 便于发现前端代码的遗漏 用了reset后，如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”，会非常扎眼（任何人都看得出来），开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没reset，浏览器会提供“勉强可以”的默认样式，很多人可能就发现不了或者会想“可能就这么设计的吧”，开发者即使意识到因为遗漏导致和设计稿不一致，出于人性弱点也可能会想“还要赶下一个项目呢先这么凑合着吧”――由于破窗效应，这可能会导致越来越多的“凑合着吧” pc端: html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td

定义：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透” 在弹出层的 touchstart 事件中调用 preventDefault 这种方法不可取，至少有3个缺点： 如果弹出层本身是有滚动（条）的话，将会导致弹出层无法滚动，此时用这种方法无异于饮鸩止渴。 一个很常见的场景，点击弹出层，弹出层消失掉，此时也无法触发弹出层的点击回调事件。 弹出层内的任何事件都执行不了了。 此解决方案是解决方案1的升级版。 在弹出层的 touchmove （注意区别）事件中调用 preventDefault 这种解决办法没有了第一种解决办法的 2, 3 缺点。适用于弹出层本身有没有滚动（条）。 设置body{overflow:hidden;} 缺点：经测试，在PC上支持良好，但是在IOS端，跟没有设置是一样的，完全不起任何作用！。 这种解决方案适用于PC端。 设置 html,body{overflow:hidden;} 在PC和移动端都能禁止掉下层的滚动。 缺点： 滚动位置丢失！页面会回到顶部！ 页面的背景还是能够有滚的动的效果（这个我没遇到）。 可通过js来fix这个缺点，在弹出层出现时，记录页面的scrollTop，当弹出层消失时，把先前记录的scrollTop再次赋予页面。 此解决方案能够避免上述所有缺点。堪称完美。 （这个方案会导致主页面display

插件1、vConsole: 一个轻量、可拓展、针对手机网页的前端开发者调试面板。 GitHub: https://github.com/Tencent/vConsole/ 特性： 安装使用： 执行 npm install vconsole < script src = " path/to/vconsole.min.js " ></ script > < script > // init vConsole var vConsole = new VConsole (); console . log ( ' Hello world ' ); < / script > 插件2、AlloyLever: 开发调试发布，错误监控上报，用户问题定位 Github: https://github.com/AlloyTeam/AlloyLever 安装使用： 执行npm install alloylever 项目index.html页面中配置 AlloyLever . config ({ : ' //s. url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js ' // vconsole的CDN地址 : " //a. qq.com " // 错误上报地址 : ' qun ' // 错误上报msg前缀，一般用于标识业务类型 : ' msg '

因为我之前已经将新版本和旧版本的弹性盒模型研究过，并且转载了我认为比较好的文章，所以这里不再对他们进行详细的介绍，如果想要了解更详细的请点击 新版本弹性盒模型： https://blog.csdn.net/lhjuejiang/article/details/80019673 旧版本弹性盒模型： https://blog.csdn.net/lhjuejiang/article/details/80471369 这里我只是将两者进行对比总结，方便记忆 先说一下我测试的关于弹性盒模型的兼容性的问题吧：IE9及以下是不兼容display:flex的，IE下是没有display:box的，如果你写了display:-ms-box，编译器是会提示有错的，并且编译器提示的时候也是没有display:-ms-box或者display:box的，所以也就是说IE9及以下是不能使用弹性盒模型的 弹性盒模型（新旧对比） 新版弹性盒模型 旧版弹性盒模型 定义容器（设置在父级） display:flex display:box 是否需要加浏览器内核前缀 不需要 一定要加（不支持-ms-） 主轴方向富裕空间管理 （设置在父级） justify-content:flex-start|flex-end|center box-pack:start|end justify和新版的space-between效果一样

目有个交互需要实现手指滑动的交互，pc端使用mousedown,mousemove,mouseup监听实现。 但在ios设备上mousemove是不好监听的，同类的方法是touchstart,touchmove,touchend。 项目需求，需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性， 所以想到HTML5中的 drag 事件， 发现移动端 android & IOS 并不支持 drag 事件。现在让我们来介绍一下移动端的常用事件吧 一、click点击事件 二、touch触摸事件 2.1事件列表 　　　　changedTouches：保存了所有引发事件的手指信息 　　　　targetTouches：保存了当前对象上所有触摸点的列表; 　　　　touches：保存了当前所有触碰屏幕的手指信息 2.1.1事件属性(只读属性) 移动端触摸事件属性里的数组元素的属性：每个事件有列表，每个事件列表还有以下属性 　　　　pageX //相对于页面的 X 坐标,与 clientX 不同的是，他包括左边滚动的距离，如果有的话。 三、tap类触碰事件 四、swipe滑动事件 五、gesture手势事件 gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。 gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。 gestureend

前言 最近因业务需求在项目中嵌入了 tinymce 这个富文本编辑器，用于满足平台给用户编辑各类新闻内容什么的业务需求，前后也花了不少时间体验和对比了市面上各类开源编辑器。 *案例demo版本： vue-tinymce-demo 在线预览： vue-tinymce-demo.netlify.com/#/ 各大WYSIWYG编辑器的简单比较 1、UEditor 因为已经不再维护了，需要大量修改源码，很多都是专门为jsp等服务器渲染项目写的代码需要删除， 然后越删越害怕越删越不敢用，依赖 jquery ，需要专门用js去parse编辑完成的内容，parse完的内容还可能污染全局css，兼容老浏览器还不错， 但是，我们不怎么考虑兼容IE。所以，告辞。 2、wangEditor 中文文档，上手快，依赖 jquery ，功能少点要花时间去写插件，需要单独为图片上传功能写个接口，老项目忙着上线临时用过，感觉并不适合当前业务这么重的编辑功能于是放弃了。 3、Quill api友好, 功能少，需要特定的css去解析文本（这点我不大喜欢），ui好看，适合作为论坛回帖功能使用。 4、CKEditor CKEditor目前主流的还是 4.x 的版本，但是文档看着很瞎眼实在是提不起兴致去配置，草草用了下就放弃了， 5.x 版本刚从beta结束，需要指定专门的node以及npm版本

转载 https://blog.csdn.net/aaronzzq/article/details/80936708 目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2建立精美的app应用 vuetify ★2925 - 为移动而生的Vue JS 2组件框架 Keen-UI ★2749 - 轻量级的基本UI组件合集 vonic ★1913 - 快速构建移动端单页应用 vue-multiselect ★1539 - Vue.js选择框解决方案 eme ★1529 - 优雅的Markdown编辑器 vueAdmin ★1455 - 基于vuejs2和element的简单的管理员模板 bootstrap-vue ★1267 - 应用于Vuejs2的Twitter的Bootstrap 4组件 Vue.Draggable ★1191 -

（1）在浏览器和移动端能够良好展示页面,头部新增内容 快捷键meta:vp+tab <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> 最后一个属性不是必要的 位于 <meta charset="UTF-8">后 css样式表前 （2）页面宽度随用户操作变化,且不发生变形现象 装满移动端宽度 width:100%; 设置最小和最大宽度让移动端不变形 max-width:640px; min-width:320px; 通常为640和320px （3）2倍图 有时图片的分辨率和大小不能很好地适配页面 采用2倍图方法 background-size:200px 200px;宽度像素 长度像素 （4）搜索框随页面缩放长度方式改变 1flex 2margin:0 100px; 3padding:0 100px; 搜索框部分宽度参照父容器,不能人为设置具体宽度 左右浮动的话没有效果 max-width: 640px; /* 不填的话浏览器会溢出 */ width: 100%; （5）使图片基线对齐不出现下方空隙 /*1.设置为块元素 2.可以将文本的字体大小设置为0 3.vertical-align:bottom*/ 其中1如果同时要使图片水平居中