Hi everyone!
I have an app written in Ionic 3, and I want in iOS to have the same behavior as in Android regarding the font size.
Atm, on an Android device, if I change the OS/system’s display settings and change the text size, my application automatically adjusts its font size.
On an iOS though, the font size of my application doesn’t change based on the based on the OS’ settings and stays the same.
Is there any easy fix that can be applied to change this?
Below are my scss files if needed:
app.scss:
// http://ionicframework.com/docs/v2/theming/
// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
$item-wp-detail-push-show: true;
$item-md-detail-push-show: true;
.homeLogoNavBar {
height: 70%;
}
.old-browser-info {
display: none;
}
ion-label {
white-space: normal;
}
/*
// Menu user profile
.user-profile {
.user-avatar {
width: 68px;
height: 68px;
display: inline-block;
border-radius: 50%;
box-shadow: inset 0 0 10rem rgba(0,0,0,.25), 0 0 4rem rgba(255,255,255,.45);
img {
border-radius: 50%;
}
}
.toolbar-background {
background-image: linear-gradient(135deg, color($colors, primary), color($colors, primary));
}
.other-data {
.column {
&:first-child {
border-right: 1px solid rgba(36, 50, 157, .25);
}
}
}
}
*/
/*
#smallButton {
width: 50%;
}*/
// For wrapping text in the alert radio labels/options
.alert-md .alert-radio-label {
white-space: pre-wrap;
}
.alert-ios .alert-radio-label {
white-space: pre-wrap;
}
.alert-wp .alert-radio-label {
white-space: pre-wrap;
}
.doctor-checkin-popover-email .popover-content {
width: 95%;
}
.toolbar-title {
white-space: normal;
}
ion-toolbar[color="secondary"] {
.toolbar-content {
color: #fff !important;
}
}
ion-toolbar[color="primary"] {
* {
// font-weight: bold;
// color: #fff !important;
font-size: 1.6rem;
}
// color: #fff !important;
font-size: 1.6rem;
color: $contrast-with-primary-text-color;
background-color: $primary;
.select-ios,
.select-md,
.select-icon .select-icon-inner {
color: #fff;
}
.select-placeholder.select-text {
font-weight: bold;
}
.bar-button-secondary-ios,
.bar-button-default.bar-button-ios-secondary,
.bar-button-clear-ios-secondary,
.ion-button.secondary {
color: $contrast-with-primary-text-color !important;
font-weight: bold;
}
}
.segment-md .segment-button,
.segment-ios .segment-button {
color: $text-color;
&.segment-activated,
&.activated {
color: $contrast-with-primary-text-color;
background: $primary;
}
}
ion-item {
&.item-input .item-inner {
border-bottom: 0.55px solid #c8c7cc !important;
}
&.item-input.input-has-focus .item-inner {
border-bottom: 0.55px solid $primary !important; // border-width: 2px;
}
}
ion-card.card-md {
ion-list {
padding-bottom: 0;
}
}
.image-icon {
height: 2em;
&.large {
height: 4em;
}
width: auto;
text-align: center;
margin: 0.5em auto;
/* padding: 5px; */
}
.toolbar-ios,
.toolbar-md,
.toolbar-wp {
padding: 0;
}
ion-toolbar + img {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
;
ion-list-header .full {
max-width: 100% !important;
}
ion-menu[type=overlay] {
opacity: 1;
}
a[disabled],
button[disabled],
[ion-button][disabled] {
cursor: default;
opacity: .2;
pointer-events: none;
}
#iframe {
display: none;
}
.platform-browser {
#iframe {
display: block;
}
#no-iframe {
display: none;
}
}
.swiper-pagination-bullet-active {
background: $primary;
}
@media (min-width: 768px) {
.ion-page {
margin-left: 30%;
width: 70%;
}
ion-menu {
width: 30%;
display: block;
}
.bar-button-menutoggle {
display: none;
}
ion-menu ion-backdrop {
display: none;
}
ion-content {
border-left: none;
}
ion-menu[type=overlay] .menu-inner {
-webkit-transform: translateX(0px) !important;
transform: translateX(0px) !important;
box-shadow: none;
width: 100%;
}
}
/*
* Components Cards page style
*/
.card-background-page {
ion-card {
position: relative;
text-align: center;
}
.card-title {
position: absolute;
top: 36%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff;
}
.card-subtitle {
font-size: 1.0em;
position: absolute;
top: 52%;
width: 100%;
color: #fff;
}
}
h1.as-header-icon {
text-align: center;
}
h1.as-header-icon ion-icon {
font-size: 6em;
}
/*
* Components Grid page style
*/
.grid-page {
ion-col {
padding: 0;
}
ion-col div {
background-color: #F9FAFB;
padding: 0;
border: 1px solid #ddd;
border-radius: 2px;
text-align: center;
}
}
/*
* Components Icons page style
*/
.icons-page {
ion-icon {
font-size: 50px;
}
ion-row {
height: 100%;
flex-wrap: wrap;
}
ion-col {
flex: 0 0 25%;
max-width: 25%;
text-align: center;
padding: 10px 5px;
}
}
/*
* Components Avatar List page style
*/
.avatar-list-page {
ion-note {
font-size: 12px;
align-self: flex-start;
margin-top: 14px;
}
}
.back-button-icon {
color: $primary;
}
.list-header,
.tile.card {
// background: $primary ;
// color: #fff !important;
}
.tile.card-content {
padding: 0;
}
.header-bg {
background: $primary !important;
color: #fff !important;
.select-icon-inner,
.select-placeholder,
ion-label,
ion-select {
color: #fff !important;
}
}
ion-list-header.color-secondary {
background: $secondary !important;
color: #fff !important;
}
.list-header-md,
.list-md-header {
margin-bottom: 0;
}
.tile {
.label {
margin: 0;
}
.item,
.item h1,
.item h2,
.label {
// background: $primary !important;
// color: #fff !important;
}
.item h1 {
font-size: 4.5rem;
padding: 0;
}
.h2 {
padding: 0 !important;
}
}
.scroll-x.row {
overflow-x: scroll;
flex-wrap: nowrap;
}
h1 + h3 {
margin-top: -15px;
}
::-webkit-scrollbar {
width: 0;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
display: none;
}
ion-col {
min-width: 150px;
padding: 0;
}
/*
.card-content-md{
background: $toolbar-background !important;
}
*/
ion-header img.title-image {
max-height: 2em;
width: auto;
}
.swiper-slide {
overflow-y: scroll;
display: block;
}
.quick-action.card {
background: $secondary;
color: #fff;
margin-bottom: 2px;
}
.hello-title {
width: 100%; // height: 1000px;
position: relative;
overflow: hidden;
/* Enable GPU Rendering */
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.blur {
/* All the background image supports */
transform: translate(0px, 0px, 0px);
background-image: -webkit-linear-gradient(bottom left, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
background-image: -moz-linear-gradient(bottom left, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
background-image: -o-linear-gradient(bottom left, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
background-image: linear-gradient(to top right, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
position: absolute;
width: 100%;
height: 100%;
/* blur filters */
-webkit-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
/* positioning and removing edges */
top: -70px;
right: -70px;
left: -70px;
padding: 70px;
}
.blur:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: 1001;
/* Setting the gradient. Adds depth, and glass like effect. */
background-image: -webkit-linear-gradient(289deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
background-image: -moz-linear-gradient(289deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
background-image: -o-linear-gradient(289deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
background-image: linear-gradient(-19deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
/* Blur to add depth. High to create smooth transition */
-webkit-filter: blur(70px);
-o-filter: blur(70px);
filter: blur(70px);
}
.ios ion-list > .item-wrapper:last-child .item,
.ios ion-list > .item:last-child,
.md ion-list > .item-wrapper:last-child .item,
.md ion-list > .item:last-child,
.wp ion-list > .item-wrapper:last-child .item,
.wp ion-list > .item:last-child {
border-bottom: none;
}
.card {
margin-bottom: 20px;
}
#map {
width: 100%;
bottom: 0px;
top: 0px;
display: block;
height: auto;
position: absolute !important;
}
@media (min-width: 768px) {
ion-modal .ion-page {
margin-left: 0;
width: 100%;
}
}
.swiper-pagination-progress .swiper-pagination-progressbar {
background: #ed1c24;
}
.menu-inner {
.toolbar-background {
border: none !important;
}
button {
padding-right: 30px;
padding-left: 0px;
}
li,
a,
.label {
padding-left: 16px;
}
.item-divider {
font-weight: bold;
padding-right: 30px;
padding-left: 0px;
.item-inner {
text-transform: uppercase;
border-bottom: 1px solid #c8c7cc;
}
}
}
.menu-inner .item-divider-md {
border-bottom: 0px;
}
[font-bold] *, [font-bold], [font-bold] ion-label, page-checkin [font-bold] ion-label, page-checkin .radio-group [font-bold] ion-label {
font-weight: bold !important;
}
/*iOS Burger Menu Bugfix
https://github.com/ionic-team/ionic/issues/13062 */
@media only screen and (max-width: 767px) {
.toolbar-ios.statusbar-padding:first-child {
padding-top: calc(0px + 4px);
min-height: calc(44px + 0px);
}
.toolbar-ios.statusbar-padding:first-child ion-title {
padding-top: 0px;
height: calc(44px + 0px);
min-height: calc(44px + 0px);
}
}
.toolbar-title-ios {
margin-bottom: -3px;
}
variables.scss:
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
@import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
$linear-color-change: rgba(239, 123, 0, 0.54);
$linear-color2-change: rgba(239, 123, 0, 1);
$linear-color3-change: rgba(239, 125, 0, 1);
$contrast-with-primary-text-color: #ffffff;
$text-color: #5b5b5b;
$background-color: #f8f9fa;
$toolbar-background: #ffffff;
$primary: #EF7D00;
$secondary: #d0cdcd;
//$grey: #9d9e9e69;
$item-md-detail-push-show: true;
$item-wp-detail-push-show: true;
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: ( primary: $primary, secondary: $secondary, danger: #f53d3d, light: #f4f4f4, dark: #222, corporate: ( base: #fecc36, contrast: #ffffff), favorite: #69BB7B, white: #FFFFFF, facebook: #3B5999, googleplus: #DD4C39, bgColor: #F7F7F7, text-color: $text-color);
$list-background-color: #fff;
// $toolbar-background: #E0B41A;
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
@import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/
$ionicons-font-path: "../assets/fonts";
@import "ionicons";
$card-ios-margin-bottom: 4px;
$card-ios-margin-left: 4px;
$card-ios-margin-right: 4px;
$card-ios-margin-top: 4px;
$card-md-margin-bottom: 4px;
$card-md-margin-left: 4px;
$card-md-margin-right: 4px;
$card-md-margin-top: 4px;
$card-wp-margin-bottom: 4px;
$card-wp-margin-left: 4px;
$card-wp-margin-right: 4px;
$card-wp-margin-top: 4px;
$progress-bar-color: #EF7D00;
$toolbar-ios-button-color: $text-color;
$alert-ios-button-text-color:$text-color;
$alert-md-button-text-color:$text-color;
$item-ios-detail-push-color: $primary;
$item-md-detail-push-color: $primary;
// $button-md-clear-text-color: $text-color;
// $button-ios-clear-text-color: $text-color;
$segment-button-ios-background-color-activated: $primary;
$segment-button-md-background-color-activated: $primary;
$segment-button-ios-text-color: $text-color;
$segment-button-md-text-color: $text-color;
/*
// Material Design Dark Theme
// ----------------------------------
$colors-md: copy-colors($colors) !default;
$text-md-color: $text-color !default;
$background-md-color: $background-color !default;
$subdued-text-md-color: $subdued-text-color !default;
$font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !default;
$font-size-md-base: $font-size-base !default;
// Material Design Outer content
// --------------------------------------------------
$outer-content-md-background-color: $background-color !default;
// Material Design Toolbar
// --------------------------------------------------
$toolbar-md-background: $toolbar-background !default;
$toolbar-md-border-color: $toolbar-border-color !default;
$toolbar-md-text-color: #fff !default;
$toolbar-md-active-color: $toolbar-active-color !default;
$toolbar-md-inactive-color: $toolbar-inactive-color !default;
// Material Design Tabs
// --------------------------------------------------
$tabs-md-background: $tabs-background !default;
$tabs-md-tab-color-inactive: $tabs-tab-color-inactive !default;
$tabs-md-tab-color-active: $tabs-tab-color-active !default;
// Material Design Card
// --------------------------------------------------
$card-md-header-color: #ddd !default;
$card-md-title-text-color: #fff !default;
$card-md-text-color: #ddd !default;
// Material Design List
// --------------------------------------------------
$list-md-text-color: $list-text-color !default;
$list-md-border-color: #dedede !default;
$list-md-background-color: $list-background-color !default;
$list-md-activated-background-color: #d9d9d9 !default;
// Material Design Item
// --------------------------------------------------
$item-md-padding-top: 13px !default;
$item-md-padding-right: 16px !default;
$item-md-padding-bottom: 13px !default;
$item-md-padding-left: 16px !default;
$item-md-padding-media-top: 9px !default;
$item-md-padding-media-bottom: 9px !default;
$item-md-padding-icon-top: 11px !default;
$item-md-padding-icon-bottom: 10px !default;
$item-md-divider-background: #151515 !default;
$item-md-divider-color: #f4f4f4 !default;
// Material Design Toggle
// ---------------------------------------------------
$toggle-md-handle-background-color-off: #f4f4f4 !default;
// Ripple Color
// --------------------------------------------------
@function ripple-background-color($button-color) {
@return rgba(red($button-color), green($button-color), blue($button-color), .1);
}
*/
$button-md-box-shadow :none;
$radio-md-color-on: #5b5b5b;
$radio-ios-color-on: #5b5b5b;
$checkbox-md-color-on: #5b5b5b;
$checkbox-ios-color-on: #5b5b5b;
$text-input-placeholder-color: #5b5b5b;
$select-md-placeholder-color: $contrast-with-primary-text-color;
$select-ios-placeholder-color: $contrast-with-primary-text-color;
$select-wp-placeholder-color: $contrast-with-primary-text-color;
$checkbox-ios-icon-checkmark-color: $contrast-with-primary-text-color;
$checkbox-md-icon-checkmark-color: $contrast-with-primary-text-color;
$checkbox-wp-icon-checkmark-color: $contrast-with-primary-text-color;