H5横屏布局+清除移动端浏览页面后的缓存问题

0.412字数 1141阅读 3306

最近有幸接到一个 H5 的活,周五谈好需求,说下周一就要效果出来,乍一看挺简单的,但是做起来就不是那么回事了。接下来说说我的踩坑之路。

一、页面里面要求有一条会自动延长的不规则曲线,就如这样。

运动的曲线.gif

开始我一听甲方说要这种效果,我是不敢接这个活的。大家肯定都知道,这条曲线如果用 canvas 或者 svg 画出来,不得一年也得半载,况且我也只是个初级选手而已,这是会出人命的!好在我问了下我们公司的 UI 大哥,他就回了我一句话: ease!画个 gif 图就好了!
于是乎以为这个最难的问题都解决了,剩下的都好说了。。。

二、甲方给出的UI图是横向的,没明确要求打开页面就是横屏播放

之前确实没有做过横屏的移动端网页,想当然的以为打开页面时,把手机横过来,页面也就自动横过来了。所以我就那么做了。结局是在交给甲方后,甲方明确要求打开页面就是横屏播放。那我能怎么样啊,钱在人家手里攥着,我只能改了!吃一堑长一智吧,谁让自己没经验呢。当时是晚上10点,我改到凌晨5点(前一天晚上加班到凌晨2点)。

  1. 竖屏页面改横屏页面的开始
    第一个念头就是 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>
出去一块的页面效果.jpg
  1. 页面是横过来了,意味着原来的 rem 布局就全乱了。当时情况紧急,一看 rem 用不上了,立马用 百分比布局 进行修改,当时的 css 中一堆乱码,放眼望去,rem 和 % 就那么混在其中。就这么整到了凌晨 5 点。我也想认真画页面啊,可是时间不等我,只能先这样了。

三、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 中写入任何的本地存储。

最后一次增加了一张图片,结果后台负责上传至服务器的同志把图片名字给写错一个字母,导致图片加载不出来。后来把路径更改之后,再次用之前打开过该页面的手机浏览时,发现图片依旧没有加载出来,然而电脑就可以。各种找原因啊,这是为啥呢?

当时我想可能是缓存的问题吧,就把手机重启了,结果还是加载不出来。后来换个手机,一切正常。然后我手动清理手机缓存之后,一切正常了。

后来在网上查阅大量资料,发现是微信搞的鬼。因为移动端从头到尾是用微信浏览的网站,找到以下解决办法。

  • 用户在用微信打开的网页中,点击右上角的三个点,然后点击里面的刷新就好了。这种方法显然是不可行的。
  • 在URL后面拼接随机字串或时间戳,但是有人说 url 后面加随机数 CDN 会失效,加版本号更合理。
  • 用PHP写HTML文本,用php以在js css 图片后面加个随机数来解决
1.jpg?rand=<?php echo rand(1000,50000); ?> 
  • 浏览器貌似是从webview的上层做的缓存。就是如果请求过了这个地址。就会存在本地。之后不取线上了。试试写头信息
<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" />

以上这些方法,我一个也没试过,因为这只是我接的一个外快而且工期特别紧,前后也就五天就上线了,不具备测试条件。如读者遇到这种问题,还请挨个试一下看看,总有一款适合你。

推荐阅读更多精彩内容