ionic2屏幕适配实现适配手机、平板等设备的示例代码

本文介绍了ionic2屏幕适配实现适配手机、平板等设备的示例代码，分享给大家，具体如下：

推荐使用的编辑器是：VS code  （Visual Studio Code）=>只负责编辑文档，不编译。

而WebStorm 有检查编译等，在ionic1开发的时候，还很方便用浏览器随时点击按键浏览效果，但是开发ionic2之后，ionic2有自动检查编译，会照成webstorm卡顿，无法编辑。

一、首先增加一个一面作为测试

我使用的工程是sidemenu

在项目目录下执行如下命令: ionic g page page4

二、运行 命令打开浏览器调试

Ionic serve

三、修改page4.html文件的内容如下：

<ion-header >
 <ion-navbar >
  <button ion-button menuToggle>
   <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>title</ion-title>
 </ion-navbar>
</ion-header> 

<ion-content style="background-color: #abaaaa;">
  <ion-grid style="height: 100%; display: flex; padding: 0px;">
    <ion-row style="background-color: #abaaaa; flex: 2;">
     <ion-col style="flex: 1; padding: 10px 10px 5px 10px; " >
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #cdcecf">
        <ion-card-content style="height: calc(100% - 30px);">
         card content
        </ion-card-content>
      </ion-card>
     </ion-col>
    </ion-row>
    <ion-row style="background-color: #abaaaa; flex: 4;">
     <ion-col style="flex: 1; padding: 5px 10px 10px 10px; " >
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #434343"> 

        <ion-card-content style="height: calc(100% - 30px);">
         content
        </ion-card-content>
       </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

其实这里参考的地方是，<ion-content></ion-content>内的部分，这个代码演示了ionic2怎样实现动态自使用布局

四、测试效果：

用鼠标拉动浏览器边框调整页面大小，会发展ionic的页面元素也会跟着动态大小变形。当这个软件编译到了平台安装包。比如编译了Android，那么页面会自适应android的屏幕。实现了对不同屏幕大小的设备适配。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ionic2屏幕适配实现适配手机、平板等设备的示例代码

    本文介绍了ionic2屏幕适配实现适配手机.平板等设备的示例代码,分享给大家,具体如下: 推荐使用的编辑器是:VS code  (Visual Studio Code)=>只负责编辑文档,不编译. 而WebStorm 有检查编译等,在ionic1开发的时候,还很方便用浏览器随时点击按键浏览效果,但是开发ionic2之后,ionic2有自动检查编译,会照成webstorm卡顿,无法编辑. 一.首先增加一个一面作为测试 我使用的工程是sidemenu 在项目目录下执行如下命令: ionic g pa

  • Android获取双卡双待手机的SIM卡信息示例代码

    前言 需要验证手机号的功能,但是国内的手机多是双卡双待的,无法获取到两个号码.在Android的官方文档是没有提供相应的Api的,因为标准的Andoird是没有双卡的,好像也只有国内才会搞双卡双待的神器吧. 以下记录一下做这个功能所学习到的东西. Android 获取本机手机号(适用于双卡双待手机) 直接上代码: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; import

  • IOS 屏幕适配方案实现缩放window的示例代码

    背景: 公司有个iPad项目(只支持横屏),是11年开发的,那时的iPad只有1024x768的分辨率,所以没有屏幕适配的问题,frame都是写死的.后来不同尺寸的iPad相继出现,本来应该会出现屏幕不能适配的问题,但是由于该项目没有设置启动图,页面会自动等比例缩放撑满整个屏幕,各分辨率的宽高比相差不多,所以并没有出现太大问题.但是2020年3月4日,苹果要求所有提交至 App Store 的 app 都须使用 Xcode storyboard(故事板) 来提供 app 的启动屏幕,之前的不设置

  • vue项目适配屏幕分辨率与屏幕的缩放适配详细教程

    目录 解决方案 全局导入App.vue 刷新页面 笔记本或者显示器 默认设置125%或者150%缩放,导致布局错乱的解决方法 现在很多14寸的笔记本,出厂默认就是150%的显示.导致很多时候我们的项目,自己开发的时候都是按照100%比例来开发的,上线了就会发现这个问题 解决方案 vue项目utils下新建devicePixelRatio.js文件 class DevicePixelRatio { constructor() { // this.flag = false; } // 获取系统类型

  • js使用html2canvas实现屏幕截取的示例代码

    整理文档,搜刮出一个js使用html2canvas实现屏幕截取的示例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <

  • Android 获取屏幕的多种宽高信息的示例代码

    Android 获取屏幕的多种宽高信息的示例代码

    本文主要介绍了Android 获取屏幕的多种宽高信息的示例代码,分享给大家,具体如下: 包含的宽高信息如下图所示: 在模拟器上获取到的数据: 08-26 07:19:32.712 7834-7834/com.czy.screeninfo E/MainActivity: getTotalScreenHeight 1920 08-26 07:19:33.505 7834-7834/com.czy.screeninfo E/MainActivity: getScreenWidth 1080 08-26

  • Android监听手机短信的示例代码

    本文介绍了Android监听手机短信的示例代码,分享给大家,具体如下: 以下情况可能会导致短信拦截失败: 小米,360等品牌手机拦截短信,短信的优先级给了系统 用户禁用短信权限 手机连接电脑,被电脑端的手机助手类软件截获 手机内装有QQ通讯录之类的管理联系人,短信的应用,被截获. 前提--权限: <uses-permission android:name="android.permission.RECEIVE_SMS" > </uses-permission>

  • 基于Java随机生成手机短信验证码的实例代码

    简单版 /** * 产生4位随机数(0000-9999) * * @return 4位随机数 */ public static String getFourRandom() { return StringUtils.leftPad(new Random().nextInt(10000) + "", 4, "0"); } 复杂版 /** * 创建指定数量的随机字符串 * @param numberFlag 是否是数字 * @param length * @return

  • Java实现发送手机短信语音验证功能代码实例

    这篇文章主要介绍了Java实现发送手机短信语音验证功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 利用第三方平台可以实现发送手机短信验证码和语音验证码的功能,本文使用框架是struts2+spring+hibernate,现就action层给出核心代码功能. public class VerifyAction extends BaseAction<VerifyRequest> { private static final long

  • angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

    angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

    本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下: 添加一个pipe: import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe im

随机推荐