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

最近有幸接到一个 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文件：

出去一块的页面效果.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=

• 浏览器貌似是从webview的上层做的缓存。就是如果请求过了这个地址。就会存在本地。之后不取线上了。试试写头信息

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

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