最近接到一个 H5 的活,乍一看挺简单的,做起来就不是那么回事了。
接下来说说我的踩坑之路。
1、页面里面要求有一条会自动延长的不规则曲线,就如这样。
开始我一听甲方说要这种效果,我是不敢接这个活的。大家应该都知道,这条曲线如果用 canvas
或者 svg
画出来,不得一年也得半载,这是会出人命的!好在我问了下我们之前公司的 UI 小姐姐,她就回了我一句话: ease!画个 gif 图就好了!
于是乎以为这个最难的问题都解决了,剩下的都好说了。。。哈哈哈
2、甲方给出的UI图是横向的,没明确要求打开页面就是横屏播放。
之前确实没有做过横屏的移动端网页,想当然的以为打开页面时,把手机横过来,页面也就自动横过来了。所以我就那么做了。结局是在交给甲方后,甲方明确要求打开页面就是横屏播放。那我能怎么样啊,钱在人家手里攥着,我只能改了!
① 竖屏页面改横屏页面的开始
第一个念头就是 transform: rotate(90deg)
,嗯,页面是横过来了。当时用的 rem 布局,按理说横过来之后,应该是占满全屏的,可结果并不是这样,无论我把高调成100%,还是宽调成100%,都占不满全屏。只能去google了。发现 transform: rotate(90deg)
不是这么直接写进去的。而是这样:
css文件:
//需要用到媒体查询
// screen 彩屏设备
// orientation:portrait 竖屏(竖屏设置上让其横屏播放)
@media screen and (orientation: portrait) {
#box {
-webkit-transform:rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
}
js文件:
<script>
//获取屏幕可视区宽高
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
//对宽高进行判断
if( width < height ){
$box = $('#box');
//把设备可视区的宽和高赋值给 box 的高和宽。
//这样就实现旋转过来的 box 的宽高跟屏幕的可视区大小一样了
$box.width(height);
$box.height(width);
//执行到这一步时,页面旋转过来成横向的了,宽高也跟屏幕的可视区大小一样了
//但是,发现页面并没有100%在可视区范围内,如下图
//所以需要对 box 进行定位,然后就 ok 了
$box.css('top', (height-width)/2 );
$box.css('left', 0-(height-width)/2 );
}
</script>
②
页面是横过来了,意味着原来的 rem 布局就全乱了。当时情况紧急,一看 rem 用不上了,立马用 百分比布局 进行修改,当时的 css 中一堆乱码,放眼望去,rem 和 % 就那么混在其中。就这么整到了凌晨 5 点。我也想认真画页面啊,可是时间不等我,只能先这样了。
3,ios 端背景音乐不能自动播放加自动循环播放。
iPhone自动播放音视频,可以通过以下代码解决,但必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,可能是微信接口对此做了某些限制。
① ios 端背景音乐不能自动播放
var oA = document.getElementsByTagName('audio')[0];
function audioAutoPlay(){
oA.play(); //必须加上微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady",function(){
oA.play();
},false); }
audioAutoPlay()
② ios 端背景音乐不能自动循环播放
//在标签中加入 `loop` 对 ios 无效,只能通过以下的事件监听进行弥补
var oA = document.getElementsByTagName('audio')[0];
function init(){
oA.addEventListener('ended',loopAudio,false);
}
function loopAudio(){
oA.play();
}
最后这个问题,也算是个大问题了。前提:我并没有在 js 中写入任何的本地存储。
最后一次增加了一张图片,结果上传至服务器的时候把图片名字给写错一个字母,导致图片加载不出来。后来把路径更改之后,再次用之前打开过该页面的手机浏览时,发现图片依旧没有加载出来,然而电脑就可以。各种找原因啊,这是为啥呢?
当时我想可能是缓存的问题吧,就把手机重启了,结果还是加载不出来。后来换个手机,一切正常。然后我手动清理手机缓存之后,一切正常了。
后来在网上查阅大量资料,发现是微信搞的鬼。因为移动端从头到尾是用微信浏览的网站,找到以下解决办法:
1.jpg?rand=<?php echo rand(1000,50000); ?>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
以上这些方法,我一个也没试过,因为这只是我接的一个外快而且工期特别紧(外加阑尾炎),前后也就五天就上线了,不具备测试条件。如读者遇到这种问题,还请挨个试一下看看,总有一款适合你。
文章浏览阅读2.5k次。数据的四种基本存储方法,(1)顺序存储方法(2)链接存储方法(3)索引存储方法(4)散列存储方法_数据存储
文章浏览阅读6.7k次。一、Mysql启用SSL配置1.检查mysql是否支持ssl在linux端用root账号进入mysql命令行界面,查看当前版本mysql数据库是否支持ssl,如果出现以下结果表示支持,如果没有考虑更换版本,或者编译一个带有SSL版本的mysqlshell>show variables like ‘%ssl%’;2.设置用户是否使用ssl连接1.查看用户是否使用SSL连接she..._jdbc mysql ssl
文章浏览阅读612次。java jwt使用,springboot 整合java-jwt,java jwt工具类================================Copyright 蕃薯耀2020-12-03https://www.cnblogs.com/fanshuyao/一、引入java-jwt的maven依赖<dependency> <groupId>..._jwtproperties
文章浏览阅读753次,点赞21次,收藏15次。列出现有主题,创建主题,该主题包含一个分区,该分区为Leader分区,它没有Follower分区副本。启动成功,可以看到控制台输出的最后一行的started状态:此时kafka安装成功。查看zookeeper状态,zookeeper启动成功,再启动kafka。onsole-producer.sh用于生产消息**开启消费者和生产者,生产并消费消息。开启消费者和生产者,生产并消费消息。在Zookeeper中的根节点路径。创建主题,该主题包含多个分区。的地址,此处使用本地启动的。查看指定主题的详细信息。
文章浏览阅读695次。6-7 在一个数组中实现两个堆栈(20 分)本题要求在一个数组中实现两个堆栈。函数接口定义:Stack CreateStack( int MaxSize );bool Push( Stack S, ElementType X, int Tag );ElementType Pop( Stack S, int Tag );其中Tag是堆栈编号,取1或2;Max_pta数据结构6-7
文章浏览阅读123次。概述 您可能有大量应用程序产生的JSON数据,您可能需要对这些JSON数据进行整理,去除不想要的字段,或者只保留想要的字段,或者仅仅是进行数据查询。 那么,利用阿里云Data Lake Analytics或许是目前能找到的云上最为便捷的达到这一目标的服务了。仅仅需要3步,就可以完成对海量..._什么云服务可以直接存储json数据
文章浏览阅读1.9k次,点赞8次,收藏17次。二维数组作为实参,二级指针作为形参part1报错:说我给二级指针传了一个数组指针去,数组指针(指向数组的指针),part2给二级指针传一个数组指针就可以解决了。part3(总结)把指针数组和数组指针好好区别一下!!!指向数组的指针:int (*array)[3];含义是一个指向存放3个整型数据的数组的指针存放指针的数组: char *array[3];含义是一个数组中存放了3个..._二维数组传参数用2级指针
文章浏览阅读2k次。目录前言1. 什么是软件测试?2. 软件测试的目的?3. 软件测试的目标4. 软件测试的原则5. 测试的职责6. 软件都有多少种分类?7. 软件的分类8. 测试的主要方面9. 软件测试的对象10. 什么是“测试案例”?11. 怎么编写案例?12. 软件测试的两种方法13. 测试结束的标准是什么?14. 软件的生命周期15. 软件测试按过程分为三个步骤16. 面向对象的设计如何影响测试?17. 软件带来错误的原因很多。主要的原因有哪些?18. 软件测试的步骤是什么?19.小结今天给大家复习一下软件测试的基本知_软件测试的目标是什么,有哪几种主要的测试方法?
文章浏览阅读2.8k次,点赞5次,收藏26次。CTF BugKu平台——Crypto篇抄错的字符抄错的字符描述: 老师让小明抄写一段话,结果粗心的小明把部分数字抄成了字母,还因为强迫症把所有字母都换成大写。你能帮小明恢复并解开答案吗:QWIHBLGZZXJSXZNVBZWQW1h base64解码为 AmaBL92 base64解码为 _vZXJ5 base64解码为 eryX2Nv base64解码为 _cob2w= base64解码为 olflag{Aman_very_cool}这题出的确实好u1s1 出题人完胜!..._抄错的字符 ctf
文章浏览阅读206次。(17 封私信 / 1 条消息) 嵌入式Linux应用 - 搜索结果 - 知乎 (zhihu.com)
文章浏览阅读9.6k次,点赞11次,收藏89次。鼠标滚轮实现图像放大缩小的主要思想:通过wheelEvent来获得鼠标滚轮的angleDelta,即滚轮转角。然后通过数据类型转换,将读取的值转换成整型数值叠加到图像的尺寸长和宽上,从而实现图像的放大和缩小。注意:滚轮向上滑转角为正,所以图像放大。滚轮向下滑转角为负,所以图像缩小。下边直接上代码,头文件中只需要加上使用鼠标滚轮的声明函数就行:void wheelEvent(QWheelEve..._qt滚轮放大缩小
文章浏览阅读7.9w次,点赞53次,收藏235次。若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936本文章博客地址:https://blog.csdn.net/qq21497936/article/details/94585803目录前话相关博客QGLWidget概述QGLWidget子类示例更新绘制覆盖层绘制技术线程方案一:在线程中进..._qt 用qopenglwidget生成release版,依赖什么库