How to enlargen View (buttons, etc.) on tablet screens

I designed a view with several “small” buttons. however, would like to see regular sized buttons when viewing the web app on a tablet screen. Is there an automatic resize (responsive-like) feature that I’m not using? Thx.

Hi Leedabord,

You can use the class- “button-large” and “button-small”.

 <a class="button icon-right ion-chevron-left button-large button-light button-clear"></a>

Let me know if you need additional information.

Thanks and Regards,
Aditya

First determine what device are you using in your app.run with the help of jquery than initialize the variable and apply conditional css or sass according to your choice

Thanks. I would like to know if the ionic framework can already automatically detect the size of screen and enlarge or shrink buttons to match the screen. So, I designed a screen with many small buttons for my phone but when using the web app on a tablet, I had a lot of space and regular sized buttons would be more user-friendly. So, looking for something wherein I can specify button-small and button-large in the class and have the framework automatically pick based on screen size.

Thanks. I would like to know if the ionic framework can already automatically detect the size of screen and enlarge or shrink buttons to match the screen. So, I designed a screen with many small buttons for my phone but when using the web app on a tablet, I had a lot of space and regular sized buttons would be more user-friendly. So, looking for something wherein I can specify button-small and button-large in the class and have the framework automatically pick based on screen size.

Since I’m building an app for personal use, I don’t mind waiting for a “framework” solution. In the meanwhile, I’ve assumed that I will use the app on a tablet and am using regular-sized buttons instead of button-small. Thanks.

in app.run
$rootscope.isWebView = ionic.Platform.isWebView();

in your controller
access the variable to your scope
$scope.isWebView = $rootscope.isWebView

in your html tag for ex-
<ion-button class="{{ isWebView ? button-large : button-small }}">
writhe the conditional tag

or you can apply css according to screen size
media-screen

1 Like

Thanks. That looks pretty slick. I’ll try it out.