移动互联网终端

01.响应式开发 1.1响应式开发原理 1.2响应式布局容器 案例:响应式导航 02.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 Bootstrap使用 2.3布局容器 03. Bootstrap 栅格系统 3.1栅格系统简介 3.2栅格选项参数 3.3列嵌套 3.4列偏移 3.5列排序 3.6响应式工具 04.阿里百秀首页案例 05.移动端布局总结 5.1移动端主流方案 5.2移动端技术选型 来源： CSDN 作者： 冲冲冲冲` 链接： https://blog.csdn.net/Better_Xing/article/details/104518647

记录一下最近遇到的两个小bug，也不算小bug，可能在不同的移动端浏览器表现不同吧。一个是虚拟键盘顶起，一个是滚动穿透问题。 首先需要明确的一点是，虚拟键盘的顶起在IOS端和Android端有很大的不同变现。 监听移动端软键盘弹起和收起 1. Android端 监听resize 1234567891011 var winHeight = $(window).height();$(window).resize(function () { var thisHeight = $(this).height(); if( winHeight - thisHeight > 140) { } else { // 键盘收起 }}) 2. IOS端 监听input失焦blur ios中的键盘或者第三方键盘并不会监听到 window resize 事件，所以不能用 resize 监听，所以需要通过输入框是否获取焦点来判断。 在Android中，有一些机型，键盘收起了，输入框仍处于焦点状态，并没有触发 focusout 事件。 因为 focusin 和 focusout 支持冒泡，对应focus和blur，所以根据需求，我们可以选择相应的事件。 1234567 $(document).on('focusin', function () {　　//软键盘弹出的事件处理});$(document).on(

需求 用户能在手机上上传视频并预览。 问题 上传完成后安卓下封面展示正常，ios下封面空白。如下图所示： 利用canvas截取视频第一帧发现，ios下截取到的第一帧一直是空白图片, 安卓正常。 后端利用javacv库截取，返回给前台封面图，ios竖屏拍摄下的视频截取到的图片有90度旋转，javacv库无法取得旋转信息，但是控制台打印出的视频元信息带有旋转信息。安卓无论横屏竖屏都没有旋转。 解决方案 上述的前两个问题，ios下html开发的文档中指出了video标签只有用户触发了playback才会展示封面图，否则建议指定poster，参考链接如下 https://developer.apple.com/library/archive/documentation/AudioVideo/Co 大专栏 移动端Video标签踩坑记录 nceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1 那么既然要触发播放，我就想到利用js模拟click事件之后截取第一帧，发现依然是空白，于是放弃用后台截取。 这里如果前端能实现利用第一帧作为封面图，那么视频上传预览时

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw 作者：何彦军 目前在移动端开发的展示界面中，如果一段文本的数量过长，受限于屏幕的宽高等因素，有可能不能完全显示，这个时候就会把溢出的文本显示成省略号。 最近就亲身经历了一系列类似的需求，于是这里做个总结和记录。 首先一个最基本的需求就是当文本超过一行最大宽度时，超出的部分变为省略号，如下图所示。 这个功能比较基础，只用css就可以实现，如下图所示代码块。 可是有时候产品同学希望显示的文本可以再多一点，于是就有了多行文本溢出显示省略号的需求，如下图所示。 这个功能也可以通过css实现，如下图代码块所示。 这里用到了webkit的css扩展属性，因此适用于webkit浏览器及移动端，并且在兼容性方面也有些影响，但是只要不是特别老旧的机器，还是完全能够支持的。 在支持了多行文本溢出显示省略号的功能之后，产品同学又发现了体验不友好的点，如下图所示。文本在第二行开头处就结束了，这就导致第二行大部分是空白的，影响了美观度。 因此，产品同学提出了一个新需求： 当文本没有超过第x行的一半时，则按第x-1行溢出显示省略号的方式展示；（第1行除外） 当文本超过第x行的一半但没有超过第x行时，则正常展示； 当文本超过第x行时

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw 作者：何彦军 目前在移动端开发的展示界面中，如果一段文本的数量过长，受限于屏幕的宽高等因素，有可能不能完全显示，这个时候就会把溢出的文本显示成省略号。 最近就亲身经历了一系列类似的需求，于是这里做个总结和记录。 首先一个最基本的需求就是当文本超过一行最大宽度时，超出的部分变为省略号，如下图所示。 这个功能比较基础，只用css就可以实现，如下图所示代码块。 可是有时候产品同学希望显示的文本可以再多一点，于是就有了多行文本溢出显示省略号的需求，如下图所示。 这个功能也可以通过css实现，如下图代码块所示。 这里用到了webkit的css扩展属性，因此适用于webkit浏览器及移动端，并且在兼容性方面也有些影响，但是只要不是特别老旧的机器，还是完全能够支持的。 在支持了多行文本溢出显示省略号的功能之后，产品同学又发现了体验不友好的点，如下图所示。文本在第二行开头处就结束了，这就导致第二行大部分是空白的，影响了美观度。 因此，产品同学提出了一个新需求： 当文本没有超过第x行的一半时，则按第x-1行溢出显示省略号的方式展示；（第1行除外） 当文本超过第x行的一半但没有超过第x行时，则正常展示； 当文本超过第x行时

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/ZsgstdmaiFUKkLItc6y-Lw 作者：何彦军 软件测试作为软件生命周期中不可缺少的组成部分，对提高软件质量起着重要作用。随着软件测试的发展，自动化测试技术也得到了很大提高。 本文首先介绍了自动化测试的概念、分类和现状，并分别对不同端上的自动化测试实现原理进行了详细地分析和阐述，通过对目前主流的一些自动化测试框架和工具的比较，指出了当前不同端上实施自动化测试的痛点和困难。 最后通过由数据驱动的自动化测试向关键词驱动的自动化测试的探索，进而由传统模式下的自动化测试转向基于AI的自动化测试的摸索，对自动化测试的未来进行了展望。 一、自动化测试的概念 自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程。 二、适用自动化测试的项目特征 三、软件测试的分类 按项目流程： 单元测试、集成测试、系统测试、回归测试、验收测试 按技术： 黑盒测试、白盒测试、灰盒测试 按功能： 逻辑功能测试、界面测试、易用性测试、安装测试、兼容性测试 按性能： 时间性能测试、空间性能测试 按自动化： 功能自动化、性能自动化 项目流程 + 自动化 → 分层测试：unit测试（单元测试）、service测试（接口测试）、UI测试 四、自动化测试的现状 1、单元测试（极限编程-测试驱动开发）

6款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。 在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。 开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。 在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。 后面才发现，基于Vue的Quasar Framework 介绍 这个框架UI组件很全面，准备下次使用这个框架了 基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Framework https://github.com/quasarframework/quasar Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建： 响应式网站 PWA（Progressive Web App）

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw 作者：何彦军 目前在移动端开发的展示界面中，如果一段文本的数量过长，受限于屏幕的宽高等因素，有可能不能完全显示，这个时候就会把溢出的文本显示成省略号。 最近就亲身经历了一系列类似的需求，于是这里做个总结和记录。 首先一个最基本的需求就是当文本超过一行最大宽度时，超出的部分变为省略号，如下图所示。 这个功能比较基础，只用css就可以实现，如下图所示代码块。 可是有时候产品同学希望显示的文本可以再多一点，于是就有了多行文本溢出显示省略号的需求，如下图所示。 这个功能也可以通过css实现，如下图代码块所示。 这里用到了webkit的css扩展属性，因此适用于webkit浏览器及移动端，并且在兼容性方面也有些影响，但是只要不是特别老旧的机器，还是完全能够支持的。 在支持了多行文本溢出显示省略号的功能之后，产品同学又发现了体验不友好的点，如下图所示。文本在第二行开头处就结束了，这就导致第二行大部分是空白的，影响了美观度。 因此，产品同学提出了一个新需求： 当文本没有超过第x行的一半时，则按第x-1行溢出显示省略号的方式展示；（第1行除外） 当文本超过第x行的一半但没有超过第x行时，则正常展示； 当文本超过第x行时

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/ZsgstdmaiFUKkLItc6y-Lw 作者：何彦军 软件测试作为软件生命周期中不可缺少的组成部分，对提高软件质量起着重要作用。随着软件测试的发展，自动化测试技术也得到了很大提高。 本文首先介绍了自动化测试的概念、分类和现状，并分别对不同端上的自动化测试实现原理进行了详细地分析和阐述，通过对目前主流的一些自动化测试框架和工具的比较，指出了当前不同端上实施自动化测试的痛点和困难。 最后通过由数据驱动的自动化测试向关键词驱动的自动化测试的探索，进而由传统模式下的自动化测试转向基于AI的自动化测试的摸索，对自动化测试的未来进行了展望。 一、自动化测试的概念 自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程。 二、适用自动化测试的项目特征 三、软件测试的分类 按项目流程： 单元测试、集成测试、系统测试、回归测试、验收测试 按技术： 黑盒测试、白盒测试、灰盒测试 按功能： 逻辑功能测试、界面测试、易用性测试、安装测试、兼容性测试 按性能： 时间性能测试、空间性能测试 按自动化： 功能自动化、性能自动化 项目流程 + 自动化 → 分层测试：unit测试（单元测试）、service测试（接口测试）、UI测试 四、自动化测试的现状 1、单元测试（极限编程-测试驱动开发）

1.前言 到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑，如果大家有遇到什么别的坑，欢迎补充，或者觉得我哪里写错了，欢迎指点！ 2.Meta标签 页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户通过点击或者缩放等操作对屏幕放大浏览。（这个在ios10以上的版本已经失效了，即使加了下面的meta，用户双击，缩放还是可以缩放页面。大家可以按照开发需求，参考下面的连接进行限制-- ios10中禁止用户缩放页面 ） <meta content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name= "viewport" /> 复制代码 禁止ios上自动识别电话 <meta content= "telephone=no" name= "format-detection" />