xFace3.x 开发技巧(4)---适配方案

转载 2013年12月17日 09:37:15
适配方案
分辨率适配方案

1. 使用meta标签进行缩放适配(该方案仅适用于xFace平台)

  • Webkit具备高效缩放视图的能力,因此我们可以借助viewport的设置来让界面自动适应近似分辨率的屏幕.
  • Viewport为我们提供了丰富的接口,用于控制诸如是否允许用户缩放,是否自动匹配设备dpi等。
      //示例:  <meta name="viewport"content="width=480,user-scalable=yes">
  • 需要特别注意的是,我们只能在其中设置一个值:width,并且把user-scalable设置为yes。因为Andriod平台对width属性的支持并不完美:当我们在content中设置了其它与分辨率相关的属性,都会使其出现错误的缩放结果。
  • Viewport中的width:定义物理屏幕宽度对应的像素值。如果当前应用是以宽度480px来设计开发的,就将width设置为480。

2. 使用js动态选择资源包

  • 通过使用js判断不同的分辨率,引用不同的资源包进行适配。
  • 优点:简单
  • 缺点:增加了额外的资源,使得应用容量成倍增加。
横竖屏适配方案

我们推荐使用CSS3的media选择器来定义两个方向的布局样式

  • 可以将不同方向的样式分离为两个外联css文件,如下例:

<link type="text/css" media="all and (orientation:landscape)" href="landscape.css"/>

<link type="text/css" media="all and (orientation:portrait)" href="portrait.css"/>

  • 浏览器会在屏幕方向发生变化的时候自动应用landscape.css或者portrait.css所定义的样式。
  • 这两种media切换的工作模式,类似于伪类:hover。

xFace3.x 开发技巧(1)---从web开发转向移动开发

介绍一些针对移动设备常用的HTML5开发技巧。 从web开发转向移动开发视野范围的转变 这点是针对可显示的内容区域而言的,PC的内容区域相对于移动设备的内容区域来说,那已经算相当丰富了。如...

cocos2dx3.x+cocostudio多屏幕分辨率适配解决方案(干货)

版本cocos2dx3.3 1.设计分辨率 你配资源使用的分辨率大小,一般是960*640。 2.屏幕分辨率 实际上用户屏幕的分辨率大小。 想要了解更多建议阅读http://www.tairan.co...

cocos2d-x适配方案demo

  • 2014年03月18日 01:47
  • 35.19MB
  • 下载

SpriteKit游戏开发点滴[4] 适配屏幕的技巧

适配屏幕的技巧 多屏幕分辨率可真是开发者的死对头啊!常言道:你若屏幕分辨多,我就自挂东南枝~ 不过对于游戏开发而言,一旦理解了适配屏幕的原理,便可无敌于众多的屏幕分辨率了。 在开始游戏开...

使用Cocos2d-x 3.2和Cocos Studio做屏幕适配方案总结

常规策略: 今天研究了一下屏幕适配导致的缩放和展示不全的问题(黑边的方案直接淘汰)。细想一下,美工给我们一张图(假设这张图width足够长),在不同的分辨率上我们应该如何对其展示?肯定不可能在所...

cocos2d-x多分辨率适配方案:setDesignResolutionSize使用

cocos2d-x多分辨率适配方案:setDesignResolutionSize使用 原文链接:http://gpra.pkstudio.org/archives/217 cocos2d...

小程序中吸底按钮适配 iPhone X 方案

随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体...

小程序中吸底按钮适配 iPhone X 方案

小程序中吸底按钮适配 iPhone X 方案随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所...

cocos2d-x多分辨率适配方案:setDesignResolutionSize使用

 原文链接:http://gpra.pkstudio.org/archives/217 cocos2d-x是一个优秀的跨平台游戏引擎,当然跨平台超容易遇到的分辨率适配问题,cocos2d-x也...

使用Cocos2d-x 3.2和Cocos Studio做屏幕适配方案总结

常规策略: 今天研究了一下屏幕适配导致的缩放和展示不全的问题(黑边的方案直接淘汰)。细想一下,美工给我们一张图(假设这张图width足够长),在不同的分辨率上我们应该如何对其展示?肯定不可能在所...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:xFace3.x 开发技巧(4)---适配方案
举报原因:
原因补充:

(最多只允许输入30个字)