移动端web
一捆铁树枝
积跬步以至千里,积怠惰以致深渊,订阅号 learnweb123 ,欢迎关注!
展开
-
解决 IOS 系统下app内嵌H5页面没有滚动惯性
APP内嵌H5页面开发中,有遇到很多坑,大部分问题还是安卓和IOS 之间的兼容性问题,下面介绍一下遇到的一个很典型问题;问题:H5页面在IOS系统下APP中滚动时没有惯性特征:长页面在划动时,手指离开屏幕页面就停止,不会有缓冲效果;解决办法:在H5页面的滚动容器上添加如下CSS代码即可解决:{ height: 100%; overflow-y: scroll;...原创 2019-04-10 16:02:54 · 2091 阅读 · 0 评论 -
H5页面中引用的静态图片、CSS或JS时,在路径后添加时间戳,防止浏览器缓存
HTML内引用静态图片,浏览器缓存<div class="box"> <script type="text/javascript">document.write('<img src="./img/face-guide1.png?timestamp='+new Date().getTime()+'"><\/img>');</scrip...原创 2020-03-04 15:13:41 · 3403 阅读 · 1 评论 -
H5唤醒APP
H5 唤醒APP功能最近遇到一个需求,需要在从APP分享出去的H5页面中,带有一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载。这是一个很正常的推广和导流量的策略。前端小白从来没有做过这个需求,只能开始哼唧哼唧地开启自己的度娘和谷歌之旅。经过一段时间的探索之旅发现里面的学问很多,要做一个兼容性很好的方案,就需要考虑各种情况,在不同的情况适配不...原创 2019-07-03 14:18:51 · 484 阅读 · 0 评论 -
HTML5利用canvas压缩图片(不改变图片宽和高)
最近项目中有一个手机拍照上传的需求,现在的智能手机摄像头像素很高,拍出来的照片大小大都在5M左右,当手机在上传图片时遇到了问题,之前采用的方法是将图片先进行Base64编码,然后上传到服务器,结果因为图片太大,导致服务器老是回复超时错误;权衡之下决定在图片上传之前先将图片压缩;以下为我采用方法的源码:<!DOCTYPE html><html><head&...原创 2018-11-15 17:05:35 · 3793 阅读 · 1 评论 -
移动端H5强制页面横屏展示
接到一个H5小游戏的需求,需要强制H5横屏显示;大概效果如下:实现原理利用transform将这个父容器在竖屏状态下整体顺时针旋转90º,页面就处于横屏的状态。但是因为旋转元素的基点默认为本身的中心点。所以我们设置一下它的旋转中心为左上角(transform-origin: 0% 0%;),这样页面被“转出了屏幕”停留在屏幕的左侧,最后一步只需要将它往右平移一个屏幕的宽度就刚刚好(left:100vw)。完整的实现代码如下:<!DOCTYPE html><html>原创 2020-12-07 17:05:22 · 9372 阅读 · 3 评论 -
H5页面跨窗口通信之postMessage(iframe子页面向父页面发送信息)
需求背景 最近在做H5项目时,遇到一个需求,公司所有的项目共用了一个防人机页面,当人机验证完成时需要把结果参数发送给调用它的父页面,APP端在使用验证页面时,结果是通过H5与APP交互方法传递的;但是H5引用这个页面时,只能通过iframe内嵌的方式来实现,这样在验证通过后就面临着iframe内嵌页面需要将验证结果发送给外部父页面,通知外部父页面做相应的处理;实现方式 1.父页面发送消息,子页面接受消息 父页面:<!-- a.index.html --&...原创 2020-11-09 17:15:54 · 5061 阅读 · 0 评论 -
H5在部分iOS系统中软键盘收起页面不回落、input输入内容显示不全解决方法
1.部分iOS系统中软键盘收起H5页面不回落项目中遇到了,页面中input框输入信息软件盘弹起,输入完成后,点击确定,软件键盘收起时,发现页面底部滚动到上面,底部留白,页面不会弹到底部。解决方法如下: // 解决H5页面ios软键盘收回页面卡半屏问题 $("input,select").blur(function() { var u = navigator.userAgent; if (u.indexOf('iPhone') > -1) { //苹果手机 setT原创 2020-10-29 16:41:57 · 1966 阅读 · 0 评论 -
解决H5页面在iOS系统中滑动回弹效果(橡皮筋效果)导致的穿透问题
移动端开发时,H5长页面在iOS系统中滑动时,当页面滑动到顶部或底部时,页面还能够上滑或下滑,手指离开屏幕后回弹,这就时橡皮筋效果,单纯来说这个效果并没有什么问题,但是它对H5页面却并不友好,会导致穿透,导致H5页面出现被截断的假象;参考了很多文章之后,我采用了如下办法,亲测好用:使用插件inobounce(但是只适用于ios系统,安卓不适用)下载插件:npm install inobounce -s在需要处理的页面上添加如下代码:<script>i...原创 2020-08-12 17:43:49 · 6608 阅读 · 4 评论 -
vue-cli 3.0中使用postcss-px-to-viewport或postcss-pxtorem实现移动端自动适配
postcss-pxtorem和postcss-px-to-viewport都是PostCSS的插件,用于将像素单元生成rem单位或者vw单位。前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。1.安装依赖npm install postcss postcss-loader postcss-pxtorem -D2.设置规原创 2020-08-10 16:17:58 · 2340 阅读 · 0 评论 -
APP内嵌H5开发常见问题及解决方案
前言作为一个开发了多个 H5 项目的前端工程师,在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下,并在后面给出坑产生的原理,和现阶段常规的填坑方案。由此来做一个阶段性的总结。常规操作哈,点赞后再观看呗!你的点赞就是我创作的动力之一!问题下面列举了我遇到的一些常规问题,如有遇到其他问题请在评论区补充,之后我也会实践后加以补充,感谢!(经常更新该文)...原创 2020-03-11 15:38:29 · 10321 阅读 · 1 评论 -
移动端h5页面软键盘弹出后 背景图片被顶上去
移动端h5页面在软键盘弹出后,body的高度被压缩了,就导致原本高度100%的背景图被顶上去一截,需要把div的高度强行设回100%才能解决这个问题<div class="app" :style="{ height: bodyHeight + 'px' }"></div>mounted(){ this.bodyHeight=document.documentEl...原创 2020-02-13 21:25:43 · 1963 阅读 · 0 评论 -
移动端网页:给body设置 overflow:hidden 无效的解决办法
做移动端网页的时候,总会遇到一些奇葩的问题,在PC端浏览器做模拟调试时,都是完美显示的,但是一到真机调试就是各种坑;我在做移动端网页时的需求是这样的:页面背景图片是自适应屏幕大小的,页面上有输入框和按钮,当点击输入框时,移动端的软键盘弹出,但是背景图片不能受影响而被压缩,且页面不能应为软键盘的弹出高度超出屏幕显示高度而上下滚动;我的解决方案如下:在页面初始化时,获取设备像素可见宽高...原创 2018-11-06 16:58:35 · 3695 阅读 · 0 评论