Hi, I am new to ionic framework. I initially try with sample project to run ionic mobile app. Its work fine in both android and ios. But when i try same project to run in web all UI components are stretched. So my doubt is how to develop app that support both mobile and web using ionic framework. What is the proper procedure to design for web and mobile component ?. We need to design separate UI for mobile and web ? or We can able to customize , resize mobile design to web.
You CAN design a separate UI for Mobile, but I suggest you look into responsive design. The UI on Ionic projects consists mostly of HTML/CSS elements, meaning you have free reign to design your application with every bit of flexibility offered by regular webdesign.
Check this to get started, it may not be 100% applicable for Ionic but it should certainly help:
https://www.w3schools.com/Css/css_rwd_intro.asp
Thanks eskir, What my doubt is for example i have 3 tab , reach tab having separate list item in vertical row. When i look in mobile its fine but In web three tab are totally stretched and List item row are lot of space. So can i able to resize UI for web. Like list item to grid item. each tab have less space and start from left (like menu option)
You can assign different CSS classes with media queries.
For example I have an ionic application with a main menu that contains 2 different layouts depending on how the screen is oriented, this is achieved by these scss blocks:
@media screen and (orientation:portrait) { .kachel {
background: rgba(109, 152, 6, 0.8);
...
margin: 20px;
height: 65px;
}
@media screen and (orientation:landscape) { .kachel {
background: rgba(109, 152, 6, 0.8);
margin: 15px;
width: 40%;
height: 70px;
float: left;
}
For ionic 3 you could look at this : https://blog.ionicframework.com/tips-tricks-for-ionic-on-desktop
I’m in the same boat only using ionic 4 which most of these rules dont apply too