当前位置: 主页 > 帮助中心 > 行业资讯 > 微信小程序支持ipad了《iPad 适配的开发文档》

微信小程序支持ipad了《iPad 适配的开发文档》

来源:原创  |  2018-09-12 11:31 点击数:

响应显示区域变化

显示区域尺寸

显示区域指小程序界面中可以自由布局展示的区域。在默认情况下,小程序显示区域的尺寸自页面初始化起就不会发生变化。

从小程序基础库版本 2.3.0 开始,在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是:在 app.json 中添加 "resizable": true 。

代码示例:

{
  "resizable": true
}

如果小程序添加了上述声明,则在屏幕旋转时,小程序将随之旋转,显示区域尺寸也会随着屏幕旋转而变化。

Media Query

有时,对于不同尺寸的显示区域,页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。

代码示例:

.my-class {
  width: 40px;
}

@media (min-width: 480px) {
  /* 仅在 480px 或更宽的屏幕上生效的样式规则 */
  .my-class {
    width: 200px;
  }
}

屏幕旋转事件

有时,仅仅使用 media query 无法控制一些精细的布局变化。此时可以使用 js 作为辅助。

在 js 中读取页面的显示区域尺寸,可以使用 selectorQuery.selectViewport 。

页面尺寸发生改变的事件,可以使用 wx.onWindowResize 来监听。回调函数中将返回显示区域的尺寸信息。

代码示例:

wx.onWindowResize(function(res) {
  res.size.windowWidth // 新的显示区域宽度
  res.size.windowHeight // 新的显示区域高度

  // 触发当前页面的 resized 方法
  var currentPages = getCurrentPages()
  var currentPage = currentPages[currentPages.length - 1]
  if (currentPage != null && typeof currentPage.resized === 'function') {
    currentPage.resized(res.size)
  }
})
「速成应用」微信小程序开发工具,制作过程无需代码,可视化拖拽即可,提供海量行业小程序模板,一键生成微信小程序,诚招微信小程序代理
已为 28,893 商家解决技术难题

新手教程

更多+

教程大全

联系我们

业务咨询:18650073885

客服反馈:15659385479

周一至周六 9:30-18:30

公司地址:福州市高新区正荣财富中心soho 5#1307

官方微信 客服微信

福州铎淘电子商务有限公司©2015 速成应用 闽ICP备18002760号-2
Hello,欢迎来咨询~

咨询热线

微信咨询