网站首页 » 前端开发 » 移动WEB » 手机 APP 广告页适配方案
上一篇:
下一篇:

手机 APP 广告页适配方案

手机 APP 我不信你不用,作为前端开发人员,手机 APP 的 H5 页面适配问题也是逃掉的,因为那是命中注定的。下面要分享的这个只是前端 H5 页面适配中的冰山一角,但也是非常地常用的,它就是传说中的广告页。也就就是我们常常打开 APP 时第一屏所看到的图片页。

不要小看它,觉得就这么一小张图片有什么大不了的,但当你仔细分析的时候你就会发现其中的一些问题,比如:在不同屏幕的手机上要有一致的展示效果。

当需求同事给你说完后,你脑海里第一反应该会像下面这样:

那还不简单,图片宽给百分之百,高度自适应。如果再不成的话就高度设置为手机屏幕高度。生活往往就是这样,理想与现实总是会有很大的差距。

宽高百分之百,高度跟随手机高度。如果运气好,说不定还可以命中几款手机,但这真的很难,不信你试试,但我相信你比我理智,肯定就不会去试。

此时你脑海里就应该浮现一幅又一幅惨不忍睹的画面,图片各种失真变形。我们先来看看现在的一般主流 APP 是怎么处理的:

手机 APP 广告页适配方案

这波不收广告费的广告,做得还行吧?

第一张和第二张不同 APP 的处理方式竟然不同,第一张竟然是满屏的!吓我一跳,不是说好的要按套路出牌吗?!但是在这里我们也看到了一种可能,那就是满屏的效果其它也是可以实现的。至于是怎么实现的,我能想到两种可能,第一种就是牛逼的公司牛逼到把所有的不同尺寸的手机的广告图都做一个(这似乎不可能),第二种就是使用了 CSS3 的 background:cover 属性。对比第一,第二张你会发现虽然两张图片的大小一样,但是显示的的内容却有区别,第一种满屏的显示的图片内容会少一些(比如:图片的两个边沿)。

细心的你一定会看到广告面中的玄机了:页面分成两部分,上面是广告图,下面是 APP 的 LOGO 图。没错,这就是今天要分享的效果及实现的基本思路。

也就是说 Logo 周围(上下)的空页空白间隔就是用来兼容不同屏幕尺寸的手机准备的。

当我们上传一张图片后,它的长宽比率就已经确定了,可能这张图片在这个屏幕尺寸的手机上看起很完美,但有另一个屏幕尺寸(长宽比率)的手机效果就不见得了。所以我们可以学着先站在巨人的臂膀上,来实现自己心中的小梦想。我们也采取 广告图+ APP LOGO 的方式来实现这个不同屏幕手机的兼容问题。下面就是这个思路的实现代码:

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机 APP 广告页适配方案</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/main.css">
<body>
<div class="wrap">
    <div class="ads-page" id="ads-page">
        <div class="ads-image">
            <img src="images/ads-image.png" alt="">
        </div>
        <div class="app-logo">
            <img src="images/ads-logo.jpg" alt="">
        </div>
    </div>
</div>
<script src="js/main.js"></script>
</body>
</html>

简单的结构,相信你肯定会喜欢。

CSS 样式
/*
* @Author: 朝夕熊
* @Date:   2017-12-26 19:17:30
* @Last Modified by:   zhaoxixiong
* @Last Modified time: 2017-12-26 20:54:23
*/
*{
    padding: 0;
    margin:0;
}

html,body,.wrap ,.ads-page{
    width: 100%;
    height: 100%;
}

.wrap{
    position: relative;
}

.ads-page{
    background: #fff;
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    /*flex-direction: column*/
    -webkit-flex-direction: column;
     -moz-flex-direction: column;
     -ms-flex-direction: column;
     -o-flex-direction: column;
     flex-direction:column;
}

.ads-image{
    width: 100%;

}

.ads-image img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.app-logo{
    width: 100%;
    justify-content: center;
    align-items: center;
    display: -webkit-box;   /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box;     /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex;   /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex;        /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;     /* OLD - Firefox 19- */
    -webkit-flex: 1;      /* Chrome */
    -ms-flex: 1           /* IE 10 */
    flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.app-logo img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

样式使用了弹性布局的相关属性,这就实现了上面思路的兼容效果。如果没有广告图时,APP LOGO 就会自动居中,如果有广告图那就 APP LOGO 就会在屏幕的下方。

在线示例:http://yunkus.com/demo/mobile-app-advertisement-page-adaptation/

注意

PC 浏览器记得切换到手机模式,但用手机浏览效果会更佳,CSS 属性的前缀强烈建议添加,不然在有些手机中看会出现问题的。

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/mobile-app-advertisement-page-adaptation/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END