移动互联网终端

前言 　　最近在Gitee上放出了个人花费大量时间精力打造的富文本，受到了部分网友们的关注。部分网友对富文本涉及到的技术，设计实现都很感兴趣。特别是对比目前市面上的富文本后，丰富的功能更是令关注的网友们好奇。因此我想就这个富文本的开发过程，做一个简单的系列博客，介绍这个富文本从技术选型，技术难点，核心功能设计实现等方面。也希望对有兴趣阅读富文本源码需求的网友有所帮助。 富文本截图： 浮动文本、图片、视频功能 模拟移动屏幕功能 绘制流程图功能： 技术选型探讨： 　　目前市面上流行的前端技术栈如下： 　　　　1、vue技术栈 　　　　2、react技术栈 　　　　3、angular技术栈 　　　　4、jquery技术栈 　　前三者技术栈都是具有响应式设计思想，mvvm模式的框架。这三者框架都有自己的设计语言风格，对编程实现都有固定的模式要求。后者jquery是一个老牌的dom操作框架，除了dom操作，其他功能都相对较弱，但这也使其在应用上的设计组合比较灵活。 　　 富文本技术场景分析： 　　　　 基础结构： 　　　　富文本组件通常由一个div、textarea作为输入域，其修饰功能为一组用于交互的工具栏按钮，同时需要一个鼠标右键菜单。从这里可以看出，富文本自身的基础结构是不复杂的。 　　　　富文本中的内容是由html包装用户输入内容而成，其结构根据用户输入而定，具有不确定性，多样性

一、click等事件在移动端的延迟 click事件在移动端和pc端均可以触发，但是在移动端有延迟现象。 1、背景 由于早期移动设备浏览网页时内容较小，为了增强用户体验，苹果公司专门为移动设备设计了 双击放大 的功能，以确保用户可以方便地放大网页内容，但是当用户单击按钮的时候，移动设备需要延迟 Լ300ms 执行，以判断用户是否是要双击。 2、验证 下面通过js代码来直观地验证click等事件的延迟 <div class="result">点我试试</div> 移动端 时间响应原则： 优先响应移动端 独有事件。 二、解决办法 1、使用touch事件模拟click事件 如下使用touchstart和touched封装了一个移动端的tap事件 可以直接调用idcast中tap方法。 2、使用zepto中已经封装好的tap事件直接调用 $(menuBox).on("tap",callback) zepto下载链接： https://github.com/madrobby/zepto 文章来源: 移动端click延迟和tap事件

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用： ionic主要包括三个部分： CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。 JavaScript框架 - ionic基于AngularJS基础框架开发，遵循AngularJS的框架约束；主要提供了适应移动端UI的 AngularJS的扩展，主要包括指令和服务。此外，ionic使用AngularUI Router来实现前端路由。 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。 由于ionic使用了HTML5和CSS3的一些新规范，所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。 ionic.js : 指令 ionic.js对AngularJS进行了扩展，它的主要贡献是将移动端开发中常见 的UI组件抽象成AngularJS的指令

一、rem适配方法，适合窗口大小可能会改变 以及设计图小于750，或者大于750设计稿的情况 该方法，将100px为1rem，根据设计稿尺寸 缩小100就为 rem， 　　例如：font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;} <script> fnResize() window.onresize = function () { fnResize() } function fnResize() { var deviceWidth = document.documentElement.clientWidth || window.innerWidth if (deviceWidth >= 750) { deviceWidth = 750 } if (deviceWidth <= 320) { deviceWidth = 320 } document.documentElement.style.fontSize = (deviceWidth / 7.5*2) + 'px' } </script> 二、rem适配方法，适合移动设备为固定的某个宽度，以及设计图为固定的某个值例如750，或者pad,1920的情况 该方法，将100px为1rem，根据设计稿尺寸 缩小100就为 rem， 　　例如

移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。 在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。 还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。 所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例

1. 视口：(布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport)) 　meta 视口标签 <meta name = "viewport" content = “ width = device-width，user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0” 　width：宽度设置的是 viewport 宽度，可以设置 device-width(设备宽度)特殊值 　user-scalable：用户是否可以缩放，yes 或者 no（1 或者 0） 　initial-scale：初始缩放比，大于 0 的数字 　maximum-scale：最大缩放比，大于 0 的数字 　minimum-scale：最小缩放比，大于 0 的数字 　标准的 viewport 设置 　　视口宽度和设备保持一致 　　视口的默认缩放比例1.0 　　不允许用户自行缩放 　　最大允许的缩放比例1.0 　　最小允许的缩放比例1.0 2. 物理像素 & 物理像素比 　物理像素点指的是屏幕显示的最小颗粒（也就是我们说的分辨率），是物理真实存在的，这是厂商在出厂时就设置好的，比如苹果6/7/8 是750*1334 　开发时的 1px 不一定等于

基于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） 通过Apache Cordova构建移动APP（Android，iOS，…） 多平台桌面应用程序（使用Electron） Quasar允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。 当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！ 1、 iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好

物联网3D可视化开发已经辐射到各行各业，无论车间还是消防，城市还是粮仓，亦或是地铁、科技园，物联网可视化是科技的进步，也是行业的进步。而传统的3D可视化开发实施起来并不那么乐观。如果使用ThingJS是不是更好一些呢?一起来了解一下两者有哪些区别吧~ 人员配备方面：ThingJS平台使用现有开发团队可立即上手开发 3D可视化 应用，无需组建新团队;而传统3D开发需要招募并长期保有专业3D开发团队，成本高，管理难度大。 开发效率方面：ThingJS平台比传统3D开发提升10倍以上3D开发效率，维护简单;而传统3D开发是基于底层引擎开发，开发效率低，升级、维护难度大。 3D场景制作方面：ThingJS平台基于CamBuilder(3D园区搭建)和CityBuilder(3D城市搭建)，非专业人员即可快速生成并修改3D场景;而传统3D开发需招募或外包3D场景制作，成本高，交付时间长，不易修改。 3D模型制作方面：ThingJS平台基于ThingDepot(3D模型库)为物联网管理场景提供包括上万种3D模型的模型库;而传统3D开发需专业3D建模人员制作模型，增加成本和交付时间。 系统部署方面：ThingJS平台提供公有云服务和私有云部署，开发完成立即运行，降低成本，提升交付效率;而传统3D开发安装调试复杂，部署和维护成本高。 ThingJS平台的推出，解决了传统3D开发人员投入大

小白第一次发文记录自己遇到的问题。 关于隐藏移动端滚动条方法很多，这里只说本人用到的。 在PC端隐藏html右侧默认滚动条 html { /*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ scrollbar-width: none; } /*Chrome下隐藏滚动条，溢出可以透明滚动*/ html::-webkit-scrollbar{width:0px} 火狐和ie/Edge的样式会使页面内所有滚动条隐藏。Chrome只会隐藏右侧默认滚动条，想要隐藏某个标签内滚动条要单独给予样式::-webkit-scrollbar{width:0px}。 移动端隐藏滚动条 上面ie与火狐样式也可用于移动端。但Chrome就不可以了。 这里我只说我用到的方式，Chrome移动端想要用::-webkit-scrollbar{width:0px}的样式。需要设置html,body的width和height html,body{ width: 100%; height: 100%; overflow: scroll;} html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;} body{margin:0;} 这样移动端右侧默认滚动条就隐藏了

就目前为止，CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持，但对于实现布局而言，这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话，那么对于Web的布局将是一种福音。 就前面学习的CSS Grid和CSS Flexbox，我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中，已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章，将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。 开始之前 在深入介绍Flexbox和Grid结合优势之前，先来看看这样的一个需求。需要做一个响应式设计，这个设计效果看起来复杂，在不同的视窗中，改变顺序和布局的效果。这个设计效果看起来复杂，但用CSS的Grid和Flexbox来实现这样的布局，就会显得容易多了。 先来看我们需要的设计风格： 上面的是设计草图。从草图上可以看出，不管是什么样的屏幕下，整个Card有四个区域： A 、 B 、 C 和 D 。那么我们就很容易借助Grid来构建这几个区域了。 构建CSS Grid 从上面的草图我们可以看出，我们可以把整个卡片分成四个区域