H5横屏,移动端缓存

一.H5横屏布局

 

最近接到一个 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 中写入任何的本地存储。

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

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

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

 

• 用户在用微信打开的网页中，点击右上角的三个点，然后点击里面的刷新就好了。这种方法显然是不可行的。

• 在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标识符，强制刷新微信缓存

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