随笔分类 - Web前端
摘要：最近线上测试中出现一个奇怪的问题，ios客户端浏览器样式加载失效。 从表象来看，同样的css，安卓手机上可以正常展示，但是到ios手机上首次进入页面就不能正常显示 这时候，我们首先会考虑是不是ios设备的兼容问题？ 于是乎，第一想到的就是问度娘，ios手机浏览器不能正常展示css是什么原因？这么泛泛
阅读全文
摘要：标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 页面关键词 <meta name="keywords" content="your tags" /> 每个网页应具有描述该网页内容
阅读全文
摘要：在页面样式都能实现以后，就开始考虑：同一个效果，该用什么样的方式和代码去实现它比较规范？前两天逛幕课网发现了两门课程–《前端性能优化-基础知识认知》和《前端性能优化-通用缓存SDK》 reflow和repaintreflow（回流）：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置
阅读全文
摘要：最近项目开发中用到了layuiAdmin的单页版进行开发，期间遇到一些问题，在此总结一二： 单页版缓存问题 由于单页面版本的视图文件和静态资源模块都是动态加载的，所以可能存在浏览器的本地缓存问题，因此，为了避免改动后的文件未及时生效，只需在入口页面（默认为start/index.html）中，找到
阅读全文
摘要：ES6是什么 ECMAScript 6.0（以下简称ES6）是JavaScript语言（现在是遵循ES5标准）的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ES6的新特性 ES6中的let命令，声明变量，用
阅读全文
摘要：4 月 6 日，Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文，介绍到 <img> 和 <iframe> 的 loading 将新增一个属性：lazy。 使用方法如下： 范例如下： 目前 Chrome 版本是 73，默认不支持懒加载。如果你等不急，可
阅读全文
摘要：最近开发页面遇到一个问题，产品要求页面的布局按照文字的行数显示，之前我们都是按照字数进行显示，按行显示就涉及到了适配等问题，于是研究了一下。 前端开发应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 1 ov
阅读全文
摘要：在使用swiper过程中，发现a链接失效，此处没有效果,问题是 swiper是基于移动端触摸的,会有一个全局的click事件,这个事件屏蔽了A标签的链接,是为了防止手机滑动的时候不小心触发A标签而设定的, 解决方案： 经过查找分析发现是由于没有设置一个参数preventClicks，该参数默认的值是
阅读全文
摘要：问题出现的场景：在做答题活动过程中用jquery的live方法绑定的click事件在ios浏览器点击无效（不能执行） 解决问题的方法： 1、将目标元素换成 <a> 或者 button 等可点击的元素 2、给目标元素加一条样式规则 cursor: pointer; write by :tuant
阅读全文
摘要：最近在开过工作中用到了腾讯IM的功能，由于业务的需要主要使用到了： 1.loginInfo 用户登录，用户信息 2.getRecentContactList 获得最近联系人 3.getLastGroupHistoryMsgs 获取群聊天信息 4.getC2CHistoryMsgs 获取C2C的消息
阅读全文
摘要：需求用法出现的背景： 由于项目UI的优化，项目中所有tab导航选中的状态都是统一样式书写的，之前都是用的border-bottom，新的需求如果用以前的本办法就是定位一个选中边框在底部，但是涉及的模板页面比较多，所以想在样式中统一修改，就用到了：after这个伪类元素； 优化前： 优化后： 代码：
阅读全文
摘要：很早直接就了解到CSS变量相关的内容，奈何之前使用价值不高（很多主流浏览器不兼容） 最近发现主流浏览器都已经支持了这一变化 这一重要的变化，可能会让你发现，原生CSS从此变的异常强大~，下面看一下如何使用 变量的声明 css的变量声明标识符为：--，即变量名前面加2个连接线 body { --hea
阅读全文
摘要：前段时间，产品和运营整了个非常变态的需求，要求将一个活动页面输出为图片，然后用户进行分享 开始以为是用户自己手动截图分享，没想到后来不是，细思极恐，感叹需求之变态。 从网上找了N个方案，最后确定使用 html2canvas 基本可实现（http://html2canvas.hertzen.com/）
阅读全文
摘要：Canvas和SVG是html5中支持2种可视化技术，都是可以在画布上绘制图形和放入图片。下面来介绍和分析一下他们。 一.Canvas 和 SVG 简介 1.什么是Canvas？ Canvas 是H5新出来的标签 Canvas画布，利用JavaScript在网页绘制图像 在标签中给上宽高： 不用加单
阅读全文
摘要：前段时间公司针对直播服务做了改版升级，APP客户端支持了横屏和竖屏推流/播放。 在这个背景下，虽然触屏未做改动，但本着敏而好学，不断探索的精神，针对如何让web页面强制横屏显示，做了一下试验研究。 首先，当用户竖屏打开时，提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式
阅读全文
摘要：做手机H5页面的时候经常会碰到在某一个页面会显示一个手机号，坑爹的产品会说你点击一下能不能让手机弹出号码，然后拨打出去，我试了试各种百度来的方法都是失败的，比如下面的这个： 还有下面的这个： 我就想说我为什么用了这些方法都不好使呢。手机按了半天都是提示错误。然后我就想了个扭曲的办法，其实和上面这些标
阅读全文
摘要：方案需求： rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题，我们需要动态的给文档的根节点添加font-size 值。 使用mediaquery 可以解决这个问题，但是每一个文件都引用一大串的font-size 值很繁琐，而且值也不能达到连续的效果。 就使用js动态计算给
阅读全文
摘要：遇到问题情境： 由于Layui部分内置模块依赖jQuery，所以没有单独引入jQuery，但是在使用$常规写法获取dom元素时，提示未定义 出现问题的原因： 由于Layui部分内置模块依赖jQuery，所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块（唯一的一个第三方模块）。只
阅读全文
摘要：最近项目中有个需求要求打印web页面数据，但是碰到打印预览显示数据时，多的数据就不翼而飞了（不分页），搞的很是焦灼~ 最先是以为纸张的问题，胡乱折腾了一番，把A4约硬是改成了LARGE号的纸，多的数据就显示出来了，但是大多打印机用的都是A4，这样就有问题了~ 继续想办法改！ 来无意看到一个强制分页的
阅读全文
摘要：问题出现背景 在项目底部导航中，有图片和文字，点击的时候文字和图片不会同时变选中状态，出现的原因是图片延迟加载，解决此问题的方案是实现图片预加载； 解决方法： 1、使用css进行图片预加载 原理是加载了该图片，但是我们不显示在可视范围内。这种方式极其简单。但是也有一个致命的弱点，图片跟随文档一同加载
阅读全文
浙公网安备 33010602011771号