初识H5横向布局带来的缓存问题

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

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

 

运动的曲线.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

2. 页面是横过来了，意味着原来的 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" />

• 用jquery自动添加css标识符，强制刷新微信缓存

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