精华内容
下载资源
问答
  • 经常会要实现单屏或者叫全屏的效果,同时要满足设备适配要求,虽然一些常见的插件能实现一定的效果,但是如果需要灵活运用的话还是会受到很多限制,在不断的实践过程中,我们梳理了一套全屏适配解决方案,能兼容IE8+...

    背景

    在平时的web开发过程中,经常会要实现单屏或者叫全屏的效果,同时要满足设备适配要求,虽然一些常见的插件能实现一定的效果,但是如果需要灵活运用的话还是会受到很多限制,在不断的实践过程中,我们梳理了一套全屏适配解决方案,能兼容IE8+,下面我们来详细了解。

    案例分析

    案例一:
    这里写图片描述

    可以看到图中元素有几类,

    1. 中间主体内容元素
    2. 背景图片
    3. 背景图片上面,主体内容下面的粒子效果
    4. 右上角音乐播放图标

    这个案例内容元素不多,我们可以通过各种方式进行适配

    案例二:
    这里写图片描述 这里写图片描述

    我们再来看看这两个活动页,基本上可以理解成只有两类,

    1. 主体内容元素
    2. 背景图片

    案例三:
    这里写图片描述

    http://u.xunlei.com/ 这是一个PC的全屏切换页面,里面的元素也是可以分为几类:

    1. 大背景图
    2. 标题导航,右边小圆点,页码,小图标
    3. 主体内容,大方块,粒子效果

    案例总结

    从以上几个案例我们可以看出,我们在页面制作中是将页面元素进行分层的,这里也就是我们要说的分层适配,我们将同一适配需求的元素归为一类,比如一般大背景和粒子效果或者背景视频,中间文案主体内容,其他边缘元素,我们暂时归三类:

    1. 背景类
    2. 主体内容
    3. 边缘内容

    基于以上三种分类,我们对应的适配需求一般是:
    1.铺满全屏,允许裁剪
    2.页面中间或其他特定位置,不允许裁剪,需完整展示
    3.页面特定位置,不允许裁剪,需完整展示

    对应以上三类元素的适配需求,我们可以把适配类型归纳为两种:contain型和cover型。
    contain型有两种情况:
    这里写图片描述 这里写图片描述

    cover型也有两种情况:
    这里写图片描述 这里写图片描述

    插件原理

    插件的原理是通过配置,给元素选择不同的适配方案,利用CSS3 transform 进行整体的缩放(IE采用ZOOM),缩放的数值计算是由屏幕宽高,以及元素宽高进行决定的。我们不用给每个元素都进行缩放,只需要给最外层的容器设置缩放即可,同时,我们开发的时候用PX单位,数值为设计稿的一半。

    if (缩放模式 == 'cover') {
    	缩放值 = Math.max(屏幕高 / 元素容器高, 屏幕宽 / 元素容器宽);//比值中大的
    }else if(缩放模式 == 'contain'){
        缩放值 = Math.min(屏幕高 / 元素容器高, 屏幕宽 / 元素容器宽);//比值中小的
    }
    
    $(元素容器).css({
        '-webkit-transform-origin':缩放中心位置,
        'transform-origin':缩放中心位置,
        '-webkit-transform': 'scale('+缩放值+')',
        'transform': 'scale('+缩放值+')'
    });
    

    以750的设计稿为例,如果我们希望主体内容是contain适配,并垂直居中,我们可以这样设置样式

    position: absolute;width: 375px;height: 603px;top: 50%;left: 50%;margin: -301.5px 0 0 -187.5px;
    

    注:IE8不支持 transform ,所以要用zoom来实现,但是zoom又不支持设置缩放中心位置,所以需要通过样式来实现居中,具体看项目IE8示例代码。

    插件实现

    GitHub地址:https://github.com/xiangshuo1992/scaleEle

    (function ($) {
        /**
        *缩放插件
        *
        * @param String select       需要缩放的元素的ID或者类名等选择器
        * @param Number width       (设计稿)宽度,移动端需要算一半(750/2)
        * @param Number height      (设计稿)高度,移动端需要算一半(1206/2)
        * @param String mode         缩放模式,有cover和contain两种,默认contain模式
        * @param String position     该参数有center/top/bottom等关键字与css对应,默认居中;
        *                            IE8,IE9不支持该参数,设置无效,所以只能通过样式达到居中,而且无法实现固定在如左下角这样的特定位置;
        *                            IE10+和移动端支持三个参数,如:'left bottom 0px'。
        */
        function ScaleEle(config){
            //默认配置参数
            this.config = {
                select: null,
                width: null,
                height: null,
                mode: 'contain',
                position: 'center'
            };
            //配置参数合并
            this.config = $.extend(this.config, config);
    
            this.getScale();
            this.setTrans();
    
            //响应屏幕变化
            var that = this;
            $(window).resize(function(){
                that.getScale();
                that.setTrans();
            })
        };
    
        //获取缩放值
        ScaleEle.prototype.getScale = function(){
            var obj = this.config;
            var eleWidth = obj.width;
            var eleHeight = obj.height;
            
            var winWidth = $(window).width();
            var winHeight = $(window).height();
            
            if (obj.mode == 'cover') {
                this.eleScale = Math.max(winHeight / eleHeight, winWidth / eleWidth);
            }else if(obj.mode == 'contain'){
                this.eleScale = Math.min(winHeight / eleHeight, winWidth / eleWidth);
            }
        };
    
        //设置元素变换
        ScaleEle.prototype.setTrans = function(){
            var config = this.config;
            $(config.select).css({
                '-webkit-transform-origin':config.position,
                'transform-origin':config.position,
                '-webkit-transform': 'scale('+this.eleScale+')',
                'transform': 'scale('+this.eleScale+')'
            });
        };
        //扩展到jQuery对象上
        $.extend({
            scaleEle: function(config){
                new ScaleEle(config);
            }
        });
    })(jQuery);
    

    说明文档

    Introduction

    ScaleEle是一个单屏(全屏)适配解决方案及jQuery插件。默认支持IE10+,适用移动端,如果需要适配IE8+,请选择IE8+版本。

    Application.js

    //= require jquery
    ...
    //= require scaleEle
    

    Configuration

    NameTypeDefaultDescription
    selectBooleannull需要缩放的元素的ID或者类名等选择器
    widthNumbernull(设计稿)宽度,移动端需要算一半(750/2)
    heightNumbernull(设计稿)高度,移动端需要算一半(1206/2)
    modeString‘contain’缩放模式,有cover和contain两种,默认contain模式
    positionString‘center’该参数有center/top/bottom等关键字与css对应,默认居中;IE8,IE9不支持该参数,设置无效,只能通过样式达到居中,而且无法实现固定在如左下角这样的特定位置;IE10+和移动端支持三个参数,如:‘left bottom 0px’。

    Examples

    <style>
        *{margin: 0;padding: 0;}
        html,body{width: 100%;height: 100%;}
        .page{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #000;overflow: hidden;}
        .page__inner,.page__bg{position: absolute;width: 375px;height: 603px;top: 50%;left: 50%;margin: -301.5px 0 0 -187.5px;background-color: #fff;}
        .page__bg{background-color: blue;}
        .box{position: absolute;width: 100px;height: 100px;left: 0;bottom: 0;background-color: red;z-index: 1;}
    </style>
    
    <div class="page">
        <!-- 可以裁切的背景层 cover-->
        <div class="page__bg"></div>
        <!-- 需要完整展示的主内容 contain-->
        <div class="page__inner"></div>
        <!-- 其他元素 -->
        <div class="box"></div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="scaleEle.js"></script>
    
    <script>
    $(function(){
        $.scaleEle({
            select: '.page__inner',
            width: 375,
            height: 603,
            mode: 'contain',
            position: 'center'
        });
    
        $.scaleEle({
            select: '.page__bg',
            width: 375,
            height: 603,
            mode: 'cover',
            position: 'center'
        });
    
        $.scaleEle({
            select: '.box',
            width: 375,
            height: 603,
            mode: 'contain',
            position: 'left bottom 0px'
        });
    })
    </script>
    

    总结

    这套适配方案,已经在很多实践案例中进行了使用,至少目前,是满足我手上所有需求的,当然有其他适配要求时可以视情况而变,思路就是分层适配,对元素进行分类,同时对其设置不同的缩放值。

    同时,也感谢身边同事带来的思路灵感和实践经验分享。

    参考:
    迅雷下载U享版
    H5 动画页面适配全解析,又是适配!!!

    展开全文
  • 妈妈再也不用担心屏幕适配了. 上面的函数写在@implementation 之外,同时自己可以定义cgsizemake函数,结合嗲三方布局框架Masonry进行布局 转载出处为: 作者:Mr_Victory 链接:...

     

    // 在AppDelegate.h中
    @property float autoSizeScaleX;
    @property float autoSizeScaleY;
    
    // 在AppDelegate.m中
    #define ScreenHeight [[UIScreen mainScreen] bounds].size.height
    #define ScreenWidth [[UIScreen mainScreen] bounds].size.width
     
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];
       
        if(ScreenHeight > 480){ // 这里以(iPhone4S)为准
            myDelegate.autoSizeScaleX = ScreenWidth/320;
            myDelegate.autoSizeScaleY = ScreenHeight/568;
        }else{
            myDelegate.autoSizeScaleX = 1.0;
            myDelegate.autoSizeScaleY = 1.0;
        }
    }
    

    如果是5,autoSizeScaleX=1,autoSizeScaleY=1;
    如果是6,autoSizeScaleX=1.171875,autoSizeScaleY=1.17429577;
    如果是6Plus,autoSizeScaleX=1.29375,autoSizeScaleY=1.2957;
    现在我们获取了比例关系后,先来看一下如何解决代码设置界面时的适配。CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height)这个方法使我们常用的设置尺寸的方法,现在我设置了一个类似于这样的方法。在.m文件中

    CG_INLINE CGRect
    TS_CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
    {
        AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];
        CGRect rect;
        rect.origin.x = x * myDelegate.autoSizeScaleX; 
        rect.origin.y = y * myDelegate.autoSizeScaleY;
        rect.size.width = width * myDelegate.autoSizeScaleX;
        rect.size.height = height * myDelegate.autoSizeScaleY;
        return rect;
    }
    
    当我们使用的时候直接这样做
    UIImageView *imageview = [[UIImageView alloc] initWithFrame:TS_CGRectMake(100, 100, 50, 50)];
    这样我们得出的就是转换后的坐标了. 这样,这个imageview在5,6和6Plus的位置和尺寸比例都是一样的. 妈妈再也不用担心屏幕的适配了.
    
    

    上面的函数写在@implementation 之外,同时自己可以定义cgsizemake函数,结合嗲三方布局框架Masonry进行布局


    转载出处为:
    作者:Mr_Victory
    链接:https://www.jianshu.com/p/446099c6cdad

    展开全文
  • LayaAir 屏幕适配-缩放模式

    千次阅读 2018-12-24 14:27:31
    目录 LayaAir 宽高定义 屏幕缩放模式 ...3、适配宽高:通过引擎的适配模式对设计宽高进行缩放改变后的宽高,为了便于区分理解,称为适配宽高 4、画布宽高:画布宽高是指 HTML5 中 canvas 节点的宽高...

    目录

    LayaAir 宽高定义

    屏幕缩放模式


    LayaAir 宽高定义

    1、设计宽高:项目代码中初始化舞台 Laya.init() 中定义的宽高即为设计宽高

    2、Stage 宽高:stage 宽高为游戏舞台实际大小的宽高

    3、适配宽高:通过引擎的适配模式对设计宽高进行缩放改变后的宽高,为了便于区分理解,称为适配宽高

    4、画布宽高:画布宽高是指 HTML5 中 canvas 节点的宽高,游戏中所有可见的内容都在画布区域内

    5、屏幕宽高:屏幕宽高是指手机浏览器屏幕的宽高,例如iphone6竖屏时的屏幕宽高为375*667。LayaAir引擎可以通过laya.utils.Browser.clientWidth 和 laya.utils.Browser.clientHeight 来获取屏幕的宽与高。

    6、物理宽高:手机屏幕窗口的实际宽高,LayaAir引擎可以通过laya.utils.Browser.width和laya.utils.Browser.height来获取设备屏幕屏幕的物理宽高。详情可参考《LayaAir 屏幕适配-分辨率、对齐模式

    屏幕缩放模式

    1、屏幕缩放指窗口大小变化时,内容应该如何变化,这是屏幕适配经常遇到的问题,窗口大小变化也就意味着分辨率变化。

    2、laya.display.Stage,提供了 scaleMode (缩放模式)函数,共有参数值:

    /**缩放模式。默认值为 "noscale"。</p>
    * <p><ul>取值范围:
    * <li>"noscale" :不缩放;</li>
    * <li>"exactfit" :全屏不等比缩放;</li>
    * <li>"showall" :最小比例缩放;</li>
    * <li>"noborder" :最大比例缩放;</li>
    * <li>"full" :不缩放,stage的宽高等于屏幕宽高;</li>
    * <li>"fixedwidth" :宽度不变,高度根据屏幕比缩放;</li>
    * <li>"fixedheight" :高度不变,宽度根据屏幕比缩放;</li>
    * <li>"fixedauto" :根据宽高比,自动选择使用fixedwidth或fixedheight;</li>
    * </ul></p>
    */
    scaleMode: string;

    3、同样为了方便调用,Laya.Stage 提供了它们对应的常量:

    SCALE_NOSCALE : String = noscale   ,[static] 应用保持设计宽高不变,不缩放不变型,stage的宽高等于设计宽高。
    SCALE_EXACTFIT : String = exactfit   ,[static] 应用根据屏幕大小铺满全屏,非等比缩放会变型,stage的宽高等于设计宽高。
    SCALE_SHOWALL : String = showall

    [static] 应用显示全部内容,按照最小比率缩放,等比缩放不变型,一边可能会留空白,stage的宽高等于设计宽高。

    SCALE_NOBORDER : String = noborder

    [static] 应用按照最大比率缩放显示,宽或高方向会显示一部分,等比缩放不变型,stage的宽高等于设计宽高。

    SCALE_FULL : String = full   ,[static] 应用保持设计宽高不变,不缩放不变型,stage的宽高等于屏幕宽高。
    SCALE_FIXED_HEIGHT : String = fixedheight

    [static] 应用保持设计高度不变,宽度根据屏幕比缩放,stage的高度等于设计宽度,宽度根据屏幕比率大小而变化

    SCALE_FIXED_WIDTH : String = fixedwidth

    [static] 应用保持设计宽度不变,高度根据屏幕比缩放,stage的宽度等于设计高度,高度根据屏幕比率大小而变化

    SCALE_FIXED_AUTO : String = fixedauto

    [static] 应用保持设计比例不变,全屏显示全部内容(类似showall,但showall非全屏,会有黑边),根据屏幕长宽比,自动选择使用SCALE_FIXED_WIDTH或SCALE_FIXED_HEIGHT

    
    //初始化引擎,不支持WebGL时会自动切换至Canvas
    Laya.init(500, 350,Laya.WebGL);
    
    //在舞台上绘制一张底图作为背景,图片分辨率:686 * 325
    var bgImageSprite = new Laya.Sprite();
    bgImageSprite.loadImage("https://www.jetbrains.com/idea/img/screenshots/idea_overview_3.png");
    Laya.stage.addChild(bgImageSprite);
    
    //在舞台绘制一个矩形
    var showInfoSprite = new Laya.Sprite();
    showInfoSprite.pos(10,10);//精灵在舞台位置为 x=10,y=10
    //矩形起点(0,0),矩形长100,宽50
    showInfoSprite.graphics.drawRect(0,0,100,50,"#CC6633");
    //在矩形的中间绘制一行文本
    showInfoSprite.graphics.fillText("缩放模式",50,10,"20px Arial","#fff","center");
    Laya.stage.addChild(showInfoSprite);
    
    //数组保存缩放模式
    var scaleModes = [];
    scaleModes.push(Laya.Stage.SCALE_NOSCALE);
    scaleModes.push(Laya.Stage.SCALE_EXACTFIT);
    scaleModes.push(Laya.Stage.SCALE_SHOWALL);
    scaleModes.push(Laya.Stage.SCALE_NOBORDER);
    scaleModes.push(Laya.Stage.SCALE_FULL);
    scaleModes.push("fixedwidth");
    scaleModes.push("fixedheight");
    scaleModes.push("fixedauto");
    
    //为整个舞台绑定单击事件;count 用于计数
    var count = 0;
    Laya.stage.on(Laya.Event.CLICK,this,stageClick);
    function stageClick (){
        console.log("切换缩放模式为:"+scaleModes[count]);
        //改变矩形显示的文本内容
        showInfoSprite.graphics.clear();
        showInfoSprite.graphics.drawRect(0,0,100,50,"#CC6633");
        showInfoSprite.graphics.fillText(scaleModes[count],50,10,"20px Arial","#fff","center");
        //改变缩放模式
        Laya.stage.scaleMode = scaleModes[count++];
        count = count>7?0:count;
    }

    事例中:设计宽高:500, 350,图片宽高:686 * 325

    ​ 1、full 模式完全按物理像素渲染,屏幕有多大,适配的画面就有多大,是高画质常用的适配模式,但是在不同尺寸的屏幕里,显示内容的大小会有所不同,同时对于HTML5游戏的性能压力要高于其它适配模式。

    ​ 2、showall 和 noborder 是等比缩放模式,会保持画面不变形。showall按照屏幕与设计宽高最小比率缩放,保证画面能完全显示出来,但会导致有空屏黑边。noborder刚好相反,按照屏幕与设计宽高最大比率缩放,不会出现空屏黑边,但会导致宽或高的部分内容无法显示出来。

    3、 fixedwidth 与 fixedheight 更像 showall和noborder 的变种,同样也是等比缩放模式,但是指定了一边不动,另外一边进行缩放,是当前HTML5游戏中比较常用的主流适配模式

    更多信息可以参考官网:https://ldc.layabox.com/doc/?nav=zh-js-1-8-3

     

     

     

    展开全文
  • Unity UI拉伸缩放适配屏幕尺寸

    千次阅读 2019-01-11 10:52:19
    直接上代码: float scaleFactor = 1.0f; if (横屏) { scaleFactor = (1920.0f / 1080.0f) / (Screen.width/ Screen.height);... scaleFactor = (1080.0f / 1920.0f) ...scaleFactor = 原始宽高比/当前屏幕宽高比

    直接上代码:

                    float scaleFactor = 1.0f;
                    if (横屏)
                    {
                        scaleFactor = (1920.0f / 1080.0f) / (Screen.width/ Screen.height);
                    }
                    else
                    {
                        scaleFactor = (1080.0f / 1920.0f) / (Screen.width / Screen.height);
                    }
                    this.transform.localScale = Vector3.one * scaleFactor;

    scaleFactor = 原始宽高比/当前屏幕宽高比

    展开全文
  • Html5应用屏幕适配方案

    千次阅读 2015-12-01 16:23:02
    前言 ... 虽然市面上有很多的移动框架可以帮助你解决不少问题,但...屏幕适配的多种方案: 从上图我们可见,为iPhone5中微信打造的页面是不能直接显示到其他分辨率手机上的,否则会造成有大量空白区域或内容缺失的情况
  • iOS开发-屏幕缩放因子 各种适配前言代码使用 前言 iOS开发中会遇到各种机型屏幕适配,下面就分享一个屏幕缩放因子的封装。 代码 直接在NSObject上分类 NSObject+Layout.h #import <Foundation/Foundation.h&...
  • 比例缩放 1-1. 方法一: 全局引进 文件 flex.js ---- 代码如下: 在 vue.config.js中配置入口文件 1-2. 方法二: 局部引进 封装一个全局组件 -- ScreenAdapter 2. 路由自动切换 APP.vue 文件 router.js ...
  • 我感觉这篇文章关于viewport 的介绍特别详细,包括比例、是否缩放等的属性介绍特别的详细,虽然文章的内容一大片的字看起来很多,但是请耐心看完,都是干货能很好的让你认识viewport。如果比较着急,请继续往下看...
  • CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。 Canvas(画布):可以随时获得设备的实际大小并对所有渲染元素进行缩放。 Widget(对齐组件):能够将元素对齐父节点的不同参考位置。 设计分辨率:...
  • 1. <div id="screen-content" > <div id="main"> <...--这里放内容-->... screenWidth: document.documentElement.clientWidth,//屏幕宽度 screenHeight: document.documentElement.
  • cocos2d-x lua 屏幕适配

    千次阅读 2018-06-04 14:30:24
    转载请注明原文地址:https://segmentfault.com/a/1190000000635287研究了两天屏幕适配,了解了Cocos提供的屏幕适配的方案有下面几种:1, EXACT_FIT使用这个选项,可以保证设计区域完全铺满屏幕,但是可能会出现界面...
  • HTML5 屏幕适配笔记

    2018-09-03 10:53:18
    -- 移动端 设置宽度为设备的宽度,禁止缩放,否可以手动缩放--> < meta name = "viewport" content = "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" > ...
  • 大屏自适配 1、这个是借鉴了大佬们使用的,我又封装成vue组件使用,用了Css3的缩放属性scale控制页面比例,不过这样的可能对地图的经纬度会产生误差,比如点击地图的地点名,可能高亮到其他附加的地方,具体需求看...
  • 关于小程序的屏幕适配。我们首先需要分清以下几个概念,pt px rpx这是我们进行屏幕适配的基础,如果对于上述概念还不清楚的同学可以参考这篇文章 微信小程序 px和rpx px和pt 深度解析_lee727n的博客-CSDN博客_px ...
  • Unity屏幕适配解决方案

    千次阅读 2020-04-26 14:30:59
    文章目录UI尺寸选择市面设备比例内存占用分辨率适配高分辨率分屏模式宽高比适配常规尺寸适配刘海屏适配全面屏适配 UI尺寸选择 市面设备比例 截至2017年9月,iOS与Android移动游戏设备比例约为iOS占28%,Android占72%...
  • Android 屏幕适配方案

    2020-07-31 17:12:33
    Android 屏幕适配方案 有老铁问我说能不能把Android屏幕适配方案汇总一下整合一篇文章, 其实我听到这句话的心里的感觉汇总这个干嘛、 每个项目的适配需求是不一样的、 我们公司的适配要求是这样的、 另一个项目是...
  • Layaair 屏幕适配

    千次阅读 2018-11-08 17:33:26
    Layair 的屏幕适配 主要有几个方案: 官方文档:https://ldc2.layabox.com/doc/?nav=zh-ts-1-8-0  Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL 最小比例缩放,  优点: 缩放完成后,缩放完成后都在屏幕...
  • 屏幕适配 原因:Android设备碎片化,导致APP的界面元素在不同的屏幕尺寸上显示不一致。 目的:让布局,布局组件,资源,用户界面流程,匹配不同的屏幕尺寸。 屏幕适配常见方式 布局适配 1、避免写死控件...
  • Android屏幕适配dp、px两套解决办法

    万次阅读 多人点赞 2016-08-26 09:55:11
    “又是屏幕适配,这类文章网上不是很多了吗?” 我也很遗憾,确实又是老问题。但本文重点对网上的各种方案做一个简短的总结,和具体使用方法。 若想了解具体android设备适配的前世因果,请阅读hongyang文章:...
  • 首先声明。此种适配方式适用于分辨率差别不是很大的情况下使用。因是通过对布局进行等比例缩放。若要求适配的机型分辨率相差较大。容易出现图片不是很清晰的情况。  首先看布局:
  • unity实战 手机屏幕适配

    千次阅读 2019-01-04 21:59:00
    使用背景 为了在UI中使用特效层,项目Canvas采用了Screen Space-Camera类型 UI的Scale Mode 选择的是Scale With Screen Size 的Expand,画布大小填的是...画布大小的宽高比值 采用以宽度缩放 屏幕实际宽高比值的...
  • 安卓使用约束者布局实现屏幕适配

    千次阅读 2017-08-04 22:50:38
    先简单快速的介绍约束者布局实现屏幕适配。 为了实现屏幕适配,我们需要解决两个问题: 一、指定控件在父控件的百分比位置。 二、指定控件占父控件的百分比空间。 我们先解决第一个问题,指定控件水平方向在父...
  • 屏幕适配最佳实践

    2019-06-11 15:10:43
    屏幕尺寸 手机屏幕对角线的物理尺寸。单位英寸(inch),一英寸大约 2.54cm。常见的手机屏幕尺寸有 4.7 英寸、5.0英寸、5.5 英寸、6.0 英寸等。 像素(px) 像素(英语:Picture Element),Pixel 的缩写。液晶屏...
  • Cocos2d 屏幕适配方案

    千次阅读 2016-05-30 11:53:17
    为了适应移动终端的各种...而在设计游戏之初,决定着我们屏幕适配的因素有哪些?简而言之只有两点:屏幕大小和宽高比。这两个因素是如何影响游戏的呢?    •屏幕大小: 从小分辨率 480×320 到 1280×800 
  • Egret深入了解屏幕适配

    千次阅读 2016-09-09 11:07:24
    ...测试Egret环境: Egret 1.5.0,Fire...根据不同的项目需求,可能需要不同的屏幕适配策略。本文将用一个简单的例子对不同的适配模式进行逐一测试。 为了简化问题,并且便于理解,我们用一个简单的用例来测试
  • 而我们进行屏幕适配时,表达方式会有所不同,会以屏幕宽的像素数量 × 屏幕高的像素数量这样来体现。例如 iPhone8在默认的竖屏状态下,物理分辨率表达为750 × 1334。横屏状态下,物理分辨率表达为1334 × 750
  • Cocos Creator屏幕适配

    2018-05-23 13:51:00
    本文主要讨论如果在Cocos Creator上实现不同的屏幕适配方案,补充官方文档的说明。 Cocos2d-JS屏幕适配 在Cocos2d-JS中,设计分辨率到设备分辨率的适配方案有5种,分别是: cc.ResolutionPolicy.EXACT_...
  • Android屏幕适配全攻略(最权威的官方适配指导)

    万次阅读 多人点赞 2015-05-19 11:34:17
    Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入的讲解了Android屏幕适配的原因、重要概念、解决方案及最佳实践,我相信如果你能认真的学习本文,对于Android的...
  • 今天说一下android开发中老生常谈的一个问题---屏幕适配屏幕适配目前来说常用的有5种方案,sw限定符适配不做讲解 像素适配(px适配), 百分比适配, 通过修改系统的density适配, 对于谷歌9.0推出的刘海屏,也...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,911
精华内容 1,564
关键字:

屏幕适配缩放全屏