HTML5屏幕适配的缩放模式之:不缩放(LayaAir引擎)
缩放模式是屏幕适配的重点内容,需要开发者通过实例体验,去深入理解。关于缩放模式的API方法scleMode共有七种参数,本篇将介绍不缩放模式的“noscale”与“full”,并说明两者的区别。
为了大家能更好的理解缩放模式,我们以iPhone5的屏幕像素(1136, 640)制作一张游戏加载页背景图(loadingBg.jpg),以Phone6的屏幕像素(1334, 750)为舞台大小,并为舞台设置背景色。结合不同的缩放模式,分别在iPhone4、iPhone5、iPhone6、iPad Mini手机屏幕中体验不同模式的区别。
loadingBg.jpg(点击下载1136, 640像素背景原图)
noscale模式
该模式不对内容进行缩放,在保持1:1原始比例的基础上,将舞台与浏览器左上角对齐。当浏览器窗口小于内容时,将进行裁切,对内容不会产生缩放变化。
(图1)Iphone4横屏的Noscale模式效果,背景右侧超出浏览器的部分被裁切
(图2)Iphone5竖屏的Noscale模式效果,背景右侧超出浏览器的部分被裁切
(图3)Iphone6横屏的Noscale模式效果
(图4)iPd Mini横屏的noscale模式效果
noscale模式示例代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | ( function () { var Stage = Laya.Stage; var Text = Laya.Text; var Image = Laya.Image; //适配模式 var modes = "noscale" ; //全局文本信息 var txt; ( function () { //初始化舞台 Laya.init(1334, 750); //设置适配模式 Laya.stage.scaleMode = modes; //设置舞台背景色 Laya.stage.bgColor = "#ffff99" ; //实例一个背景 var bg = new Image(); bg.skin = "res/img/loadingBg.jpg" ; Laya.stage.addChild(bg); //实例一个文本 txt = new Text(); txt.text = "适配模式(" +modes+ ") " ; txt.bold = true ; txt.pos(10, 350); txt.fontSize = 60; txt.color = "#fff000" ; Laya.stage.addChild(txt); })(); })(); |
full模式
full模式与noscale模式相似,不对显示内容进行缩放,在保持1:1原始比例的基础上,将舞台与浏览器左上角对齐。当浏览器窗口小于内容时,将进行裁切,对显示内容不会产生缩放变化。但是对于舞台的大小会产生改变,将舞台(stage)的宽高等于浏览器屏幕的宽高。下面我们可以注意一下两种模式之间舞台背景区域的区别。
(图5)Iphone4横屏的full模式效果,背景右侧超出浏览器的部分被裁切
(图6)Iphone5竖屏的full模式效果,背景右侧超出浏览器的部分被裁切
(图7)Iphone6横屏的full模式效果
(图8)iPd Mini横屏的full模式效果
full模式示例代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | ( function () { var Stage = Laya.Stage; var Text = Laya.Text; var Image = Laya.Image; //适配模式 var modes = "full" ; //全局文本信息 var txt; ( function () { //初始化舞台 Laya.init( 1334 , 750 ); //设置适配模式 Laya.stage.scaleMode = modes; //设置舞台背景色 Laya.stage.bgColor = "#ffff99" ; //实例一个背景 var bg = new Image(); bg.skin = "res/img/loadingBg.jpg" ; Laya.stage.addChild(bg); //实例一个文本 txt = new Text(); txt.text = "适配模式(" +modes+ ") " ; txt.bold = true ; txt.pos( 10 , 350 ); txt.fontSize = 60 ; txt.color = "#fff000" ; Laya.stage.addChild(txt); })(); })(); |